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What will you learn from this book? 


Mobile web usage is exploding. Soon, more web browsing will take place on 
phones and tablets than on PCs. Your business needs a mobile strategy, but 
where do you start? Head First Mobile Web shows how to use the web technol¬ 
ogy you’re already familiar with to make sites and apps that work on any 
device of any size. Put your HTML, JavaScript, and CSS skills to work, and 
then optimize your site to perform its best in the demanding mobile mar¬ 
ket. Along the way, you’ll discover how to adapt your business strategy by 
targeting specific devices. 

• Navigate the increasingly complex mobile landscape 

• Take both technical and strategic approaches to mobile web design 

• Use the latest development techniques, including Responsive Web Design 
and server-side device detection with WURFL 


• Learn quickly through images, puzzles, stories, and quizzes 
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Why does this book look so different? 

We think your time is too valuable to waste struggling with new concepts. 
Using the latest research in cognitive science and learning theory to craft a 
multisensory learning experience, Head First Mobile Web uses a visually rich 
format designed for the way your brain works, not a text-heavy approach 
that puts you to sleep. 
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facebook.com/HeadFirst 
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“Head First Mobile Web 
successfully presents 
practical techniques all 
readers can use im¬ 
mediately, while giving 
plenty of foundation 
and resources for more 
experienced developers 
to 'build upon. Lyza and 
Jason have created a 
pragmatic introduction 
to the chaotic world of 
mobile web development 
as it is today, with, a 
glimpse of how we can 
and should approach it 
for tomorrow.” 

—— Stephen Hay ， 
Founder and principal 
of Zero Interface 

“An excellent introduc¬ 
tion to a complex but 
exciting topic. Hands- 
on from the get-go, 

Head First Mobile Web 
provides an excellent 
introduction to the chal¬ 
lenges and opportunities 
available when explor¬ 
ing the next chapter in 
web design.” 

—— Stephanie and 
Bryan Reiger, 
Designers at Yiibu 











































































Advance Praise for Head First Mobile Web 


“If you have been considering buying a book about mobile development that is cross-browser and 
cross-vendor, you should stop right now and buy Head First Mobile Web. It’s written by amazingly smart 
people [who] have great experience on mobile and don’t stop at one platform, but work on all of them. 
Many developers spend days arguing [whether] they should go native or web. This book smoothly 
goes from introductory topics to advanced ones, giving you all the needed information to create 
exciting content for mobile.” 

— Andrea Trasatti，leader of the Device Atlas project and cocreator of 
the WURFL repository of wireless device capability information 

“A pragmatic introduction to the chaotic world of mobile web development as it is today, with a 
glimpse of how we can and should approach it for tomorrow. Head First Mobile Web successfully 
presents practical techniques all readers can use immediately, while giving plenty of foundation and 
resources for more experienced developers to build upon.” 

— Stephen Hay, web designer, developer, speaker, and 
cofounder of the Mobilism conference 


“Hands-on from the get-go, Head First Mobile Web provides an excellent introduction to the challenges 
and opportunities available when exploring the next chapter in web design.” 

— Bryan and Stephanie Rieger, founders of yiibu.com 


Praise for other Head First books 


“Head First Object- Oriented Analysis and Design is a refreshing look at subject of OOAD. What sets this book 
apart is its focus on learning. The authors have made the content of OOAD accessible [and] usable for 
the practitioner.’’ 

— Ivar Jacobson, Ivar Jacobson Consulting 


“I just finished reading HF OOA&D, and I loved it! The thing I liked most about this book was its focus 
on why we do OOA&D — to write great software!” 

— Kyle Brown, Distinguished Engineer, IBM 

“Hidden behind the funny pictures and crazy fonts is a serious, intelligent, extremely well-crafted 
presentation of OO analysis and design. As I read the book, I felt like I was looking over the shoulder of 
an expert designer who was explaining to me what issues were important at each step, and why.” 

— Edward Sciore, Associate Professor, Computer Science Department, 

Boston College 


U A11 in all, Head First Software Development is a great resource for anyone wanting to formalize their 
programming skills in a way that constantly engages the reader on many different levels.” 

— Andy Hudson，Linux Format 


“If you’re a new software developer, Head First Software Development will get you started off on the right foot. 
And if you’re an experienced (read: long-time) developer, don’t be so quick to dismiss this....，’ 

— Thomas Duff ， Duffbert’s Random Musings 


“There’s something in Head First Java for everyone. Visual learners, kinesthetic learners, everyone can 
learn from this book. Visual aids make things easier to remember, and the book is written in a very 

accessible style — very different from most Java manuals Head First Java is a valuable book. I can 

see the Head First books used in the classroom, whether in high schools or adult ed classes. And I will 
definitely be referring back to this book, and referring others to it as well.” 


— Warren Kelly, Blogcritics.org, March 2006 


“Rather than textbook-style learning, Head First iPhone and iPad Development brings a humorous, engaging, 
and even enjoyable approach to learning iOS development. With coverage of key technologies including 
core data, and even crucial aspects such as interface design, the content is aptly chosen and top-notch. 
Where else could you witness a fireside chat between a UlWebView and UITextField!” 

— Sean Murphy, iOS designer and developer 




Praise for other Head First books 

“Another nice thing about Head First Java, Second Edition, is that it whets the appetite for more. With 
later coverage of more advanced topics such as Swing and RMI, you just can’t wait to dive into those 
APIs and code that flawless, 100,000-line program onjava.net that will bring you fame and venture- 
capital fortune. There’s also a great deal of material, and even some best practices, on networking and 
threads — my own weak spot. In this case, I couldn’t help but crack up a little when the authors use 
a 1950s telephone operator — yeah, you got it, that lady with a beehive hairdo that manually hooks in 
patch lines — as an analogy for TCP/IP ports.. .you really should go to the bookstore and thumb through 
Head First Java, Second Edition. Even if you already know Java, you may pick up a thing or two. And if 
not, just thumbing through the pages is a great deal of fun.” 

— Robert Eckstein, Java.sun.com 

“Of course it’s not the range of material that makes Head First Java stand out, it’s the style and approach. 

This book is about as far removed from a computer science textbook or technical manual as you can get. 

The use of cartoons, quizzes, fridge magnets (yep, fridge magnets...). And, in place of the usual kind of 
reader exercises, you are asked to pretend to be the compiler and compile the code, or perhaps to piece 

some code together by filling in the blanks or.. .you get the picture_The first edition of this book was 

one of our recommended titles for those new to Java and objects. This new edition doesn’t disappoint 
and rightfully steps into the shoes of its predecessor. If you are one of those people who falls asleep with 
a traditional computer book, then this one is likely to keep you awake and learning.” 

— TechBookReport.com 


“Head First Web Design is your ticket to mastering all of these complex topics, and understanding what’s 
really going on in the world of web design. ...If you have not been baptized by fire in using something 
as involved as Dreamweaver, then this book will be a great way to learn good web design. ’’ 

— Robert Pritchett, MacCompanion 


“Is it possible to learn real web design from a book format? Head First Web Design is the key to designing 
user-friendly sites, from customer requirements to hand-drawn storyboards to online sites that work 
well. What sets this apart from other ‘how to build a website’ books is that it uses the latest research 
in cognitive science and learning to provide a visual learning experience rich in images and designed 
for how the brain works and learns best. The result is a powerful tribute to web design basics that any 
general-interest computer library will find an important key to success.” 

— Diane C. Donovan，California Bookwatch: The Computer Shelf 


“I definitely recommend Head First Web Design to all of my fellow programmers who want to get a grip on 
the more artistic side of the business. ’’ 


— Claron TwitcheU，UJUG 
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Lyza Danger Gardner [@lyzadanger) is a dev. She 
has built, broken, and hacked web things since 1996. 
Curiously, Lyza was actually born and raised in 
Portland, Oregon, the town where everyone wants to 
be but no one seems to be from. 

Lyza started college early and cobbled together a 
motley education: a BA in Arts and Letters from 
Portland State University, followed by a master’s 
program in computer science at the University of 
Birmingham (UK). 

Lyza has written a lot of web applications (server-side 
devs, represent!), defeated wily content management 
systems, optimized mobile websites, pounded on 
various APIs, and worried a lot about databases. 
Fascinated by the way mobile technology has changed 
things, she now spends a lot of time thinking about the 
future of the Web, mobile and otherwise. 

Since cofounding Cloud Four, a Portland-based mobile 
web agency, in 2007, Lyza has voyaged further into the 
deep, untrammeled reaches of Device Land, exploring 
the foibles and chaos of mobile browsers and the mobile 
web. She has an odd set of anachronistic hobbies, 
and it has been said that she takes a fair number of 
photographs. She owns a four-letter .com domain. We’ll 
bet you can guess what it is and go visit her there. 
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In 2000, Jason Grigsby got his first mobile phone. 
He became obsessed with how the world could be 
a better place if everyone had access to the world’s 
information in their pockets. When his wife, Dana, 
met him, he had covered the walls of his apartment 
with crazy mobile dreams. To this day, he remains 
baffled that she married him. 

Those mobile dreams hit the hard wall of reality — 
WAP was crap. So Jason went to work on the Web 
until 2007, when the iPhone made it clear the time 
was right. He joined forces with the three smartest 
people he knew and started Cloud Four. 

Since cofounding Cloud Four, he has had the good 
fortune to work on many fantastic projects, including 
the Obama iPhone App. He is founder and president 
of Mobile Portland, a local nonprofit dedicated 
to promoting the mobile community in Portland, 
Oregon. 

Jason is a sought-after speaker and consultant on 
mobile. If anything, he is more mobile obsessed now 
than he was in 2000 (sorry, sweetheart!). 

You can find him blogging at http:/ / cloudfour.com; 
on his personal site, http://userfmtweb.com .，and on 
Twitter as @grigs. Please say hello! 
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Your brain on mobile web. Here you are trying to learn something, 
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is going to activate the sprinkler system. So how do you trick your brain into 
thinking that your life depends on knowing mobile web? 


Who is this book for? xxii 

We know what you’re thinking xxiii 

And we know what your brain is thinking xxiii 

Metacognition: thinking about thinking xxv 

The technical review team xxx 

Acknowledgments xxxi 


ix 


table of contents 



getting stcfftej on tLe mobile Wet 

Responsive Web Design 

Hey there! Are you ready to jump into mobile? 

Mobile web development is a wildly exciting way of life. There’s glamour and 
excitement, and plenty of Eureka! moments. But there is also mystery and confusion. 
Mobile technology is evolving at bewildering speed, and there’s so much to know! 
Hang tight. Well start our journey by showing you a way of making websites called 
Responsive Web Design (RWD). You’ll be able to adapt websites to look great on a 
whole lot of mobile devices by building on the web skills you already have. 


index.html 



Get on the mobile bandwagon 

Something odd happened on the way to the pub 

If mobile phone web browsers are so great... 

What’s so different about the mobile web? 

Responsive Web Design 

Different CSS in different places 

CSS media queries 

The current structure of the Splendid Walrus site 
Analyze the current CSS 
What needs to change? 

Identify the CSS that needs to change 
Steps to creating the mobile-specific CSS 
What’s wrong with a fixed-width layout, anyway? 
How is fluid better? 

The fluid formula 

Continue your fluid conversion 

Context switching 

What’s wrong with this picture? 

Fluid images and media 
Remember to be responsible 
That’s a responsive site! 

Responsive design is also a state of mind 
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responsible respPnsiVeness 

Mobile-first Responsive Web Design 

That’s a beautiful mobile site. But beauty is only skin deep. 

Under the covers, it’s a different thing entirely. It may look like a mobile site, but it’s 
still a desktop site in mobile clothing. If we want this site to be greased lightning on 
mobile, we need to start with mobile first. We’ll begin by dissecting the current site 
to find the desktop bones hiding in its mobile closet. We’ll clean house and start 
fresh with progressive enhancement, building from the basic content all the way 
to a desktop view. When we’re done, you’ll have a page that is optimized regardless 
of the screen size. 



Just when you thought it was time to celebrate … 

Is there really a problem? How do we know? 

What to do when things aren’t blazing fast 
Don’t let its looks fool you, that’s a BIG page 
There’s gold in ’em HAR hills 
Find the drags on page speed 

Where did that Google Maps JavaScript come from? 
It looks mobile friendly, but it isn’t 
Mobile-first Responsive Web Design 
What is progressive enhancement? 

Fix the content floats 
Mobile-first media queries 

Surprise! The page is broken in Internet Explorer 

One src to rule them all 

Zoom in on the viewport <meta> tag 

The right to zoom? 

Add the map back using JavaScript 
Build a pseudo-media query in JavaScript 
Add the JavaScript to the On Tap Now page 
These widgets aren’t responsive 
Move iframe attributes to CSS equivalents 
Remove attributes from the JavaScript 
The map overlap is back 
Let the content be your guide 
Breakpoints to the rescue 
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a separate motile WeLsxte 



Facing less-than-awesome circumstances 

The vision of a single, responsive Web is a beautiful one... 

in which every site has one layout to rule them all, made lovingly with a mobile-first 
approach. Mmm...tasty. But what happens when a stinky dose of reality sets in? Like 
legacy systems, older devices, or customer budget constraints? What if, sometimes, 
instead of mixing desktop and mobile support into one lovely soup, you need to keep 
’em separated? In this chapter, we look at the nitty-gritty bits of detecting mobile users, 
supporting those crufty older phones, and building a separate mobile site. 
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Welcome back, Dr. Jessica Evans 
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Creature Comforts has agents in the field 
How can agents get and share the info they need? 

Send mobile users to a mobile-optimized website 
Sniff out mobile users 
Getting to know user agents 
User agents: spawn of Satan? 

Straight talk: Most major sites have a separate mobile website 
When what you really want to do is (re-)direct 
Take a peek at the script 
How does the script work? 

Make a mobile mockup 
Special delivery.. .of complicating factors 
Not all phones are smartphones...not by a sight 
Let’s keep it basic: Meet XHTML-MP 
Why would we want to use that old thing? 

Keep your nose clean with XHTML-MP 

By the way, scrolling sucks 

One last curveball 

Access keys in action 

What went wrong? 

Fix the errors 

Mobile-savvy CSS 

Hmmm... something is missing 

The button look is sorely missed! 

Great success! 
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deciding wJiPm fo support 



What devices should we support? 

There aren’t enough hours in the day to test on every device. 

You have to draw the line somewhere on what you can support. But how do you 
decide? What about people using devices you can’t test on — are they left out in the 
cold? Or is it possible to build your web pages in a way that will reach people on devices 
you’ve never heard of? In this chapter, we’re going to mix a magic concoction of project 
requirements and audience usage to help us figure out what devices we support 
and what to do about those we don’t. 


How do you know where to draw the line? 138 

Step away from the keyboard for a second 139 

Things you don’t support vs. those you can’t support 140 

Ask questions about your project 142 

Ingredients for your magic mobile potion 144 

Draw from your cupboard of tools and data 145 

How do I know my customers have the right stuff? 150 


Definition 
of ^viiereg 
to draw 
tke line 


• • • 

XIII 


table of contents 


JeVice dqtab 峽 s and dcisses 



Get with the group 

Setting the bar for the devices we support doesn’t take care 

Of a few nagging issues. How do we find out enough stuff about our users’ 
mobile browsers to know if they measure up before we deliver content to them? How do 
we avoid only building (lame) content for the lowest common denominator? And how do 
we organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enter 
the realm of device capabilities, learn to access them with a device database, and, 
finally, discover how to group them into device classes so that we can keep our sanity. 



A panic button for freaked-out students 
Mobile device data sources to the rescue 
Meet WURFL 
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WURFL and its capabilities 

WURFL: Clever API code 

We can build an explore page, too 

An explore page: Setting up our environment 

A quick one-two punch to improve our explore page 

Put capabilities to work 

Use WURFL to help differentiate content 

Initialize the device and get the info ready 

Is this thing mobile? 

Make the page a bit smarter with WURFL 
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The Tartanator 

“We Want an app!” Just a year or two ago, that hallmark cry generally meant 
one thing: native code development and deployment for each platform you wanted 
to support. But native isn’t the only game in town. These days, web-based apps for 
mobile browsers have some street cred — especially now that hip cat HTML5 and 
his sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into the 
mobile web app world by taking a mobile framework — code tools designed to help 
you get your job done quickly — for a spin! 



HTML5...app.. .what do these words even mean? 219 

How “traditional” websites typically behave 220 

How applike websites often behave 221 

The master plan for phase 1 of the Tartanator 224 

Why use mobile web app frameworks? 225 

Our choice for the Tartanator: jQuery Mobile 226 
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Color-size ingredient pairs: The color select field 259 
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Super mobile web apps 

The mobile web feels like that gifted kid in the class. 

You know, kind of fascinating, capable of amazing things, but also a 
mysterious, unpredictable troublemaker. We’ve tried to keep its hyperactive 
genius in check by being mindful of constraints and establishing boundaries, 
but now it’s time to capitalize on some of the mobile web’s natural talents. 

We can use progressive enhancement to spruce up the interface in more 
precocious browsers and transform erratic connectivity from a burden to a 
feature by crafting a thoughtful offline mode. And we can get at the essence 
of mobility by using geolocation. Let’s go make this a super mobile web app! 



It looks nice... 268 

Mobile apps in the real world 270 

Ready, set, enhance! 274 

Make a better form 275 

A widget to manage the list of colors and sizes 276 
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Victory is (finally) ours 297 
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build LyWicI mobile apps with rJaPneGap 

Tartan Hunt: Going native 

Sometimes you’ve got to go native. It might be because you need 
access to something not available in mobile browsers (yet). Or maybe your client simply 
must have an app in the App Store. We look forward to that shiny future when we have 
access to everything we want in the browser, and mobile web apps share that sparkly 
allure native apps enjoy. Until then, we have the option of hybrid development — we 
continue writing our code using web standards, and use a library to bridge the gaps 
between our code and the device’s native capabilities. Cross-platform native apps 
built from web technologies? Not such a bad compromise, eh? 
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314 
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Who is this book for? 


If you can answer “yes” to all of these: 

Do you have previous web design and development , _itdy helps i-f you^vc already 

experience? 3 。上 dhops, -too. 1/VeVe 

⑽七 xalkihft YotVti but you 

Do you want to learn, understand, remember, and should/t \tt\ visual v^\/> S J 

^2) a PPly important mobile web concepts so that you can … ' 

make your mobile web pages more interactive and 
exciting? 

(5) Do you prefer stimulating dinner-party conversation 
to dry, dull, academic lectures? 

this book is for you. 


丨 visual y ou 

see a JavaS^v-ip-t shippe-t. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 

^T) Are you completely new to web development? 


© Are you already developing mobile web apps or sites 
and looking for a reference book on mobile web? 


Are you afraid to try something different? Would you 
rather have a root canal than endure the suggestion 
that there might be more than one true way to build for 
the Web? Do you believe that a technical book can’t 
be serious if there’s a walrus-themed pub and an app 
called the Tartanator in it? 

this book is not for you. 
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Wc know what youVe thinking 


“How can this be a serious mobile web development book?” 


“What’s with all the graphics?” 

“Can I actually learn it this way?” 

And we know what your brain is thinking 







Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 


So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real]oh — recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 


And there’s no simple way to tell your brain, “Hey brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now, I really do want 
you to keep this stuff around.” 


How does your brain know what’s important? Suppose you’re out for 
a day hike and a tiger jumps in front of you. What happens inside your 
head and body? 


Great. Only 
450 more dull, 
dry, boring pages. 


Just one problem. Your brain’s trying to do you a big favor. It’s trying to make 
sure that this obviously nonimportant content doesn’t clutter up scarce resources. 
Resources that are better spent storing the really big things. Like tigers. 

Like the danger of fire. Like how you should never again snowboard 
in shorts. 


Neurons fire. Emotions crank up. Chemicals surge. 


And that’s how your brain knows ... 


This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, 10 days at the most. 
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Metacognition: thinking about thinking 


If you really want to learn, and you want to learn more quickly and more deeply, 
pay attention to how you pay attention. Think about how you think. Learn how 
you learn. 

Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught to learn. 


I wonder how I 
can trick my brain 
into remembering 
this stuff... 



The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 


So just how do you get your brain to think that mobile 
web development is a hungry tiger? 


But we assume that if you’re holding this book, you really want to learn about 
mobile web development. And you probably don’t want to spend a lot of time. And 
since you’re going to build more sites and apps in the future, you need to remember 
what you read. And for that, you’ve got to understand it. To get the most from this 
book, or any book or learning experience, take responsibility for your brain. Your 
brain on this content. 


There’s the slow, tedious way, or the faster, more effective way. The slow way is about 
sheer repetition. You obviously know that you are able to learn and remember even the 
dullest of topics if you keep pounding the same thing into your brain. With enough 
repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at 
the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning. 
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Here's what WE did: 

We used pictures^ because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in 
the text somewhere. 

We used redundancy, saying the same thing in different ways and with different media 
types, and multiple senses, to increase the chance that the content gets coded into more than 
one area of your brain. 


Behavior (JavaScript) 
Presentation (CSS) 



We used concepts and pictures in unexpected ways because your brain is tuned for 
novelty, and we used pictures and ideas with at least some emotional content, because your 
brain is tuned to pay attention to the biochemistry of emotions. That which causes you to 
feel something is more likely to be remembered, even if that feeling is nothing more than a 

little humor, surprise, or interest. 



Tqst DriVQ 


We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included loads of activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-doable, because that’s what most people prefer. 

We used multiple learning styles, because might prefer step-by-step procedures, 
while someone else wants to understand the big picture first, and someone else just wants 
to see an example. But regardless of your own learning preference, everyone benefits from 
seeing the same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain 
you engage, the more likely you are to learn and remember, and the longer you can stay 
focused. Since working one side of the brain often means giving the other side a chance to 
rest, you can be more productive at learning for a longer period of time. 



Fireside Chats 


And we included stories and exercises that present more than one point of view, 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work 
at something. Think about it — you can’t get your body in shape just by watching people at 
the gym. But we did our best to make sure that when you’re working hard, it’s on the right 
things. you^re not spending one extra dendrite processing a hard-to-understand 
example, or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, we\\,you 7 re a person. And 
your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cui ihis si^k a 

伽 youir 


^T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3) Read “There Are No Dumb Questions ■” 

That means all of them. They’re not optional 
sidebars — they We part of the core content! 

Don’t skip them. 

(4) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

( 5 ^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

^7) Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

( 8 ) Feel something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

Create something! 

Apply this to your daily work; use what you are 
learning to make decisions on your projects. Just 
do something to get some experience beyond the 
exercises and activities in this book. All you need 
is a pencil and a problem to solve ".a problem that 
might benefit from using the tools and techniques 
you’re studying for the exam. 
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Read me 

This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning, because the book 
makes assumptions about what you’ve already seen and learned. 

We expect you to know HTML and CSS. 

If you don’t know HTML and CSS, pick up a copy of Head First HTML with CSS & 
XHTML before starting this book. We’ll explain some of the more obscure CSS selectors or 
HTML elements, but don’t expect to learn about that foundational stuff here. 

We expect you to feel comfy around web scripting code. 

We’re not asking you to be a world-class JavaScript expert or to have done a graduate 
computer science project using PHP, but you’ll see examples using both languages 
throughout the book. If the merest notion of a for loop makes you hyperventilate (or if 
you have no idea what we’re talking about), you might consider tracking down a copy of 
Head First PHP & MySQL or Head First JavaScript and then heading on back here. 

We expect you to know how to track things down. 

We’ll be blunt. The mobile web is an enormous topic, and mastering it involves expanding 
your existing web development skills. There are too many things to know about the Web for 
any one person to memorize, whether it’s a detail of JavaScript syntax or the specifics of a 
browser’s support for an HTML5 element attribute. Don’t be too hard on yourself. Part of 
the toolset of a good web dev is keeping your Google chops sharp and knowing when and 
how to hit the Web to look up info about web topics. We bet you’re good at that already. 

We expect you to go beyond this book. 

It’s a big and beautiful mobile web world out there. We hope we can give you a shove to 
start you on your journey, but it’s up to you to keep up your steam. Seek out the active 
mobile web community online, read blogs, join mailing lists that are up your alley, and 
attend related technical events in your area. 

The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the 
book. Some of them are to help with memory, some are for understanding, and some 
will help you apply what you’ve learned. Don } t skip the exercises. They’re good for 
giving your brain a chance to think about the ideas and terms you’ve been learning in a 
different context. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books don’t 
have retention and recall as a goal, but this book is about learnings so you’ll see some of the 
same concepts come up more than once. 
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The Brain Power exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning 
experience of the exercise is for you to decide if and when your answers are right. In 
some of the Brain Power exercises, you will find hints to point you in the right direction. 


Software requiremewts 


As for developing any website, you need a text editor, a browser, a web server (it can be 
locally hosted on your personal computer), and the source code for the chapter examples. 

The text editors we recommend for Windows are PSPad, TextPad, or EditPlus (but 
you can use Notepad if you have to). The text editors we recommend for Mac are 
TextWrangler (or its big brother, BBEdit) or TextMate. We also like Coda, a more 
web-focused tool. 

If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust you 
don’t need us to tell you about them. 

If you are going to do web development, you need a web server. You’ll need to go to 
Appendix ii, which details installing a web server with PHP. We recommend doing that 
now. No, seriously, head there now, follow the instructions, and come back to this page 
when you’re done. 

For Chapter 5, you’ll need to install the WURFL (Wireless Universal Resource FiLe) API 
and data. And for Chapter 8, you’ll need the Android SDK and some related tools. You 
guessed it: there are appendixes for those tasks, too. 

You’ll also need a browser — no, strike that — as many browsers as 
possible for testing. And the more mobile devices with browsers you 


have on hand, the better (don’t panic; there are many emulators you can use 
if you don’t have hardware). 



For developing and testing on the desktop, we highly recommend Google’s 
Chrome browser, which has versions for Mac, Windows, and Linux. 
Learning how to use the JavaScript console in Google’s Chrome Dev Tools 
is well worth the time. This is homework you need to do on your own. 


Last of all, you’ll need to get the code and resources for the examples in the 
chapters. It’s all available at http://hf-mw.com. 



TV^C Vvf - site 心 startmj 

o-f Code -fov- dll dKaf*tcv-s. 
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1 getting stinted on tfce mobile Web 





參 Responsive Web Design 


Dashing, exciting, fascinating, 
and oh-so-popular...but am I 
ready to take the plunge? 




w 


Hey there! Are you ready to jump into mobile? 

Mobile web development is a wildly exciting way of life. There’s glamour and 
excitement, and plenty of Eureka! moments. But there is also mystery and confusion. 
Mobile technology is evolving at bewildering speed, and there’s so much to know! 
Hang tight. We’ll start our journey by showing you a way of making websites called 
Responsive Web Design (RWD). You’ll be able to adapt websites to look great on a 
whole lot of mobile devices by building on the web skills you already have. 


this is a new chapter 


it’s a mobile world 


fret ow the mobile bandwagon 

There’s a pretty good chance you own a mobile phone. We know that not 
simply because you bought this book (smart move, by the way!), but because 
it’s hard to find someone who doesn’t own a mobile phone. 

It doesn’t matter where you go in the world. Mobile phones are being used 
everywhere, from farmers in Nigeria using their mobiles to find which 
market has the best price for their crops, to half of Japan’s top 10 best-selling 
novels being consumed and written — -yes ， written — on mobile phones. 

At the beginning of 2011， there were 5.2 billion phones being used by the 

6.9 billion people on Earth. More people use mobile phones than 
have working toilets or toothbrushes. 


The time is mow 


So yeah, mobile is huge, but it’s been big for years. Why should you get on 
the mobile bandwagon now? 


Because the iPhone changed everything. It sounds cliched, but it is true. 
There were app stores, touchscreens, and web browsers on phones before the 
iPhone, but Apple was the first to put them together in a way that made it 


easy for people to 



understand and use. 


^ you \rcady -to gc-t oh 
the mobile bahdwa^oh? 
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getting sfarfec/ 


Everyone has iPhones. And 
if they don’t, are they really 
going to browse the Web? 


The iPhone is fantastic, but people use a lot of 
different phones for a lot of different reasons. 

And the most popular phones are likely to change. 

We have no way of knowing what the the leading phones will be 
when you read this book. Three years ago, Android was a mere 
blip on the radar. In 201 1， it is a leading smartphone platform 
worldwide. 

Mobile technology changes quickly, but there are a few things we 
feel confident about: 

o Every new phone has a web browser in it. 

You can probably find a new phone that doesn’t have a web 
browser in it, but you have to look pretty hard. Even the most 
basic phones now come with decent browsers. Everyone wants the 
Web on their phone. 

❺ Mobile web usage will exceed desktop web usage. 

Soon the number of people accessing the Web via mobile phones 
will surpass those who use a computer. Already, many people say 
they use their phones more frequently than their PCs. 

❺ The Web is the only true cross-platform technology. 

iPhone, Android, BlackBerry, Windows Phone, WebOS, Symbian, 
Bada — there are more phone platforms than we can keep track of. 
Each one has its own specific programming hooks, meaning that if 
you want to write software for each, you have to start from scratch 
each time. 

Mobile web has its own challenges, but there is 
no other technology that allows you to create 
content and apps that reach every platform. 


So you’re in the right spot at the right time. Mobile web is taking off, 
and you’re ready to ride the rocketship. Let’s get started! 
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meet the splendid walrus 


Something odd happened on the 
way to the pub 

Mike is the proprietor of The Splendid Walrus, a pub with a 
clever name and a cult-like following of local beer enthusiasts. 
Mike always has unusual beers on tap and highlights several 
of them on his website. 

Before he realized his lifelong dream of pub ownership, Mike 
was a web developer. So he had no trouble putting together a 
respectable website for The Splendid Walrus himself. 




Visit Us! 

Location 

1543 SW Pretend Street 
Ponland, OR 97201 

Hours 

M-F 

Until midnight 
Sa-Su 
Until 1AM* 

Call ut 

.1(503) 555-1212 


This month's special 
洲 。 幻一 8 一 4 一：： s . 

二一 


treat. We've concoctcdsomcpre^^^ I 

Drop (— o ： 


W0 n<lci&l custom cocktails to 
Or you can go 
ic citrus). 


classic 


The Splendid Walrus pub U 
place in downtown 
Portland, Ore., to do «f 

these things 

Sample local and hajd to- 

find microbrcws always 
least 20 

^ Meet fnends and hang out 

^ Surf the Web while sipping 
a pint (free wifi!) 

gO* Catch a cult ftek (movie 

Monday* 1 -) 

^7* Have a favorite cocktail or 
sample spirits from local 





4 Chapter 1 








getting sfarfec/ 


If mobile phone web browsers are so great 

Mike built the Splendid Walrus website several years ago, when 
mobile browsing was still rudimentary and uncommon. It was made 
for — and tested in — desktop browsers like Firefox, Internet Explorer, 
and Safari. 

Lots of newer mobile browers have good reputations. They’re 
increasingly sophisticated and powerful, and starting to feel like some 
of their desktop counterparts. 

..shouldn't this just work? 

Mike had a rude awakening when he looked at the Splendid Walrus 
site on his iPhone 4. It didn’t look so hot on a friend’s Android 
device, either. 



&A^ajuii 5 


"ST" 


10:02 


25% 

,ocaHy 

i 啦 Hand 
from loca 


s how -the Splendid 
■ite looks oh iPliohC 午… 


The Splendid Walrus: Public House and Spirits 

splendidwalrus.com/s... C 


..and hevVs iioy/ site 
looks oy\ a MoWola 
Badk-flif A^dv-o'id fheme. 


Visit Us! 

Locatkm 

XUySVi I*mcnd Strcri 

IS)«tUad.OR f730l|Hji 


This month’s special 

%g\ off Jmxz lUndft 
vodka bll«». 

Jazz Hands Vodka u Ihe newest product from 
local distiller Awesomesauce. Bright and vivid, 
it's Ihe perfect warm-rather treat. WeVe 
anwuctiHl M>mv pretty wunderful cukIow 
cwklailMu highli 汕 U (lr> Uw “ ur 

ih«. Reyret). Or you cangu cbwsic with our 
ultra fresh Lemon Drop (made with organic 
citrus). 




THr .Splrnriid Wulrii* 


thinK» 


!S«np*e 
to-find 


iucji and n 
micrubTW* 


least 


%»rf Ihr Wr(» 

>tppin([ a pint {irwm 
Catch • t-ull fli<4 (mnrir 

I lavra bnunlr cudcUU 
or Munpk ifiinU Iru* 
1ml ibtliBriir* 
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the brave new world of mobile web design 


Whafs so different about the mobile web? 


0 


My iPhone has the Safari web 
browser on it. My site looks great 
in desktop Safari, so why does it 
look all messed up on my phone? 




There are 86 billion different mobile web browsers. 

OK, not quite that many. But when you’re developing for the 
mobile web, sometimes it feels this way. Unlike the handful 
of leading desktop browsers, there are hundreds of different 
mobile browsers. Yikes. 

❺ Support for web technologies varies wildly. 

On older mobile browsers (or even recent ones on less powerful 
devices), you can pretty much forget about reliable CSS or 
JavaScript. Even the newest browsers lack support for some 
things, support them in bewilderingly different ways, or have 
weird bugs. It’s the Wild West out here, folks! 

❺ Mobile devices are smaller and slower. 

Yeah, we know. Newer mobile devices are state-of-the-art 
pocket computers. But they still pale in comparison to desktop 
(or laptop) computers in terms of processing power. Mobile 
networks can be flaky and downright poky, and data transfer is 
not necessarily free or unlimited. This means we’ll need to think 
about putting our sweet but enormous, media-rich, complex 
sites on a performance-savvy diet. 


jus-fc whch you 
thihk youVc oh -top 
^11 of them, a 
ohc will pop up 

1 〜 like, Thaibhd. 


Mobile interfaces require us to rethink our sites. 

Just because a mobile browser can render a desktop website 
with few hiccups doesn’t mean it necessarily should. Screens are 
smaller; interactions and expectations are different. 

People with mobile devices use all sorts of input devices: fingers, 
stylus pens, the little nubbins they have on BlackBerry devices. 
Typing and filling out forms can be tedious at best. Squinting 
at type designed to fit a desktop browser window can give your 
users headaches and fury. You get the idea. 
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getting started 



Here’s how Mike’s iPhone 4 renders the Splendid Walrus website. It doesn’t look so 
great. Can you spot the problem areas? Mark any problems you see. 



Vwn. Us! 

Location 

1543 SW PnHrnd SUroet 
PortlaDd. UK g720l IMml 

lloura 

M-F 

Until uiiiliu]^il 
Sa-Sn 
Until iAM* 

•At Itmtl 


Call u» 



This moniii*s spm'iai. 

off Jazz llandjs Vodica: locally-made 
vodka hli««. 

Ja22 Hands Vodka 比 the newest product from 
local distiller Awesomesauce. Bright and vivid, 
it*s the perfect warm-weather treat. We've 
concocted some pretty wonderful custom 
cocktails to highlight it (try the White Devil or 
the Regret), Or you can classic with our 
ultra-frp« 5 h !pmnn Drop (madp with organic 
citrus). 



The Splendid Walrus 
pub in the place in 
downtown Portland, 
Ore., to do all of these 
things: 

Saiii|ik* luuil Mill ImjiI- 
to find macrubrrwr. 
altra ”！ al load 30 

rmating ups 

Mcrl fiit r iid» «ml kuiuj; 
out 

Surf the Web while 
s^pfiinK a pint (fire ysiiil) 

Catch a cuh flick {movie 
Mnnrfayv,) 

Hive a fi\x)ril€ cucktoil 
or Micnplc apinti from 
local dis4iUcrira 
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exercise solution 



Did you spot some of these problem areas? 



The havi^a*tior\ I'mks 

are all tmy ar\d too 

small *bo read o\r dlidk. 



The Splendid Walrus: Public House & Spirits 


❻ 


The embedded 
YouTube video 
docs^-t y/o\rk. 


Visit Us! 


This MiiN*m , .s sph-iai 


Location 

1543 SW Pnrtvnd Street 
PortUnd. UK 97201 IMulI 

Uoum 

M-F 

Until uitdjai^il 
Ka-Sn 
Until iAM* 


Call ui» 



You 晒 


2S% off Jazz Hands Vodka: 
vndka hlift*. 


iT 


Jazz Hands Vodka is the newest pr 
local distiller Aweaomesauce. Bright and vivid, 
it's the perfect warm-weather treat. We've 
concocted some pretty wonderful custom 
cocktails to highlight it (try the White Devil or 
the Regret). Or you can 职 classic with our 
ultra-frpsh !i>mnn Drop (madp with organic 
citrus). 



The Splendid Walrus 
pub ia the place in 
downtown Portland, 
Ore., to do all of these 

ihlnKS ： 

>r ^' SUiii|ik ， lm«l jut] Iuuil* 
to find microbmvr. 
aKnys at load ao 

rotating ups 

Mcrt (inrmb autl tuiu)( 
out 

Surf the Web while 
dpfknK a pint (free wlfll) 

^ y * Caleb « cuh flick (movie 
MnnrfayV) 

H 羹 ve • fiavoritp cocktail 
or nacnplc spintx firuin 
local disliUerira 






The *thv-cc—dolumh 
layout -feds OV\ 
■this st>rccv\ \rcsolu*tioh, 
dhd *thc is hard 
*bo read- 



There is a y/ci\rd gap 
oy \ 七 he vi^lvt 
-the SdV-CCh. 



This is confusing and embarrassing. 
I want my customers with mobile 
devices to see a nice site. I’m out 
of my depth here. Can you help? 
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getting sfarfec/ 


Ugh! What a mess! Were totally 
going to have to start from scratch. 


o 



Frank: Hold on a minute. We know that Mike makes a big 
deal out of using clean, semantic HTML markup and uses 
CSS to control layout and styling as much as possible. 


Jim: And? That’s great and professional, but how does it 
help us make this better? 

Frank: Well, let’s think about this a bit. When I look at the 
CSS he’s using for the Splendid Walrus site, I see a lot of 
widths and sizes defined to fit within a 960-pixel box. It looks 
like he’s designed the site on a 960-pixel grid, with three 
main columns. 

Jim: . • .and most mobile devices have resolutions 
considerably less than 960 pixels. Also, three columns seems 
like a lot for a smaller screen. 

Frank: So.. .1 have to wonder ...what if we could use different 
CSSfor mobile devices? Say, maybe, CSS designed to lay out in 
320 pixels, which is the width of a lot of smartphone screens? 
And maybe reduce the number of columns? 


Jim: Nice idea, Frank. But I don’t see how we could do that 
without a lot of server-side programming. I mean, how do we 
get mobile devices to use completely different CSS? 


Frank: You know how Jill just got back from the Awesome 
Cool Mobile Web Gamp conference and is all excited about 
that thing called Responsive Web Design? 

Jim: How could I forget? It’s all she’s been talking about. 

Frank: Well, she says it’s getting a lot of attention from 
web developers and it sounds like it involves, at least in 
part, applying different CSS for different situations, without 
having to do heavy-duty programming. Apparently it’s 
especially useful for developing mobile websites. I can’t really 
remember the details, but maybe we should check it out. 
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responsive web design 


Responsive Web Pesign 

Responsive Web Design (RWD) is a set of techniques 
championed by web designer Ethan Marcotte. Sites designed 
with this approach adapt their layouts according to the 
environment of the user’s browser, in large part by doing some 
nifty things with CSS. 

Depending on the current value of certain browser conditions 
like window size, device orientation, or aspect ratio, we can 
apply different CSS in different circumstances. By rethinking the 
way we do page layouts, we can make formerly one-size-fits-all 
column and grid layouts flow more naturally across a continuum 
of browser window sizes. 


The recipe for Responsive Web Pesigw 

There are three primary techniques for building a 
responsively designed website: 




RWD is one ol tke simplest 
and quickest ways to make 
a wetsite work kandsomely 
on a lot ol devices—and you 
can use tke wet skills you 
alreacty kave. 


o 


❺ 


o 


CSS3 media queries 

Evaluating certain aspects of the current browser 
environment to determine which CSS to apply. 

Fluid-grid layouts 

Using relative CSS proportions instead of absolute 
sizes for page layout elements. 


/ l/Ve — apply di-PWhl CSS 

based oh things like bv-ov/scir v/ihdov/ 
width, aspect v-atio, ov-ichtatioh. 


Fluid images and media 

Making our images and media scale to fit within 
the size constraints of their containers by using 
some CSS tricks. 


uses 'ms*tcad 

o( f>'ix.els as um*b (or toluwms 
layou-t elements. 




Fluid images av>d media keef v/rthm 
bounds o\ *tV>c*iv fav ⑶七 clcrncr>*b, sdalm^ 
fv-opovtiov>ally v/i-th v-cs*t o( i\\t layo^ 
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Aw example of a responsively designed site 



Somcwha-t 
si ^plcv layout 
as "the wihdow 
width dcC^rcSiscs 


f\ wult»6olum^, V)'»5^ 
layout — ⑶ ^cve s 

^bl v-oom 


S-bv-camlmcd, 
s'm^lc—Column layout 
-fov r\av-\rov/cv displays. 


OOI 


©a 


a 


o 


o (3 O o O 
O O o O o 
o o o oc? 


This is jus*t o^C C%3rwflc o( 
a vcspoy>sWc dcsi^ affv-oadh- 


index.html — ^/c dclivcv* *thc same 


’ 广 ttT/l/IL ad CSS iojll 

^ dcv'idcs ar>d bvo>wscv-s. 


styles.css 


CSS media ^ucv-ics 
dctcv-rw*mc whidh o( 
ihc CSS -feo apply "fco 
whidh c^vi\ro^rwc^-ts. 


you are here ► 


11 






















































selective css 


Pifferewt CSS iw different places 


If you’ve been doing web development for some time (and are 
GSS-sawy), you might be friends with CSS media types already. 
We can use @media rules to apply CSS selectively. 

CSS media type declarations inside of a CSS file look like this: 



@media screen { /* CSS Rules for screens! */ } 


is B type. 


P v-ulcs 

、 brakes Will OY^ apply 

■tV^c Cov\itY\i is rtY\dtrtd ov\ 
a screen. 


Another way to use media types to apply CSS selectively is from 
within a <link> in your HTML document. 


r JV[eJla Types 

Up cfce 

Common (and useful) media types 
include screen, print, and all. 
There are other, less common media 
types like aural, braille, and tv. 

Curious? If you’re the kind of 
person who reads technical specs for 
fun or to satisfy curiosity, you can 
see all of the media types defined 
in GSS2 on the W3C’s site at 
www.w3.org/TR/CSS2 / media.html. 



The \rulcs m 七 his wtemal siylcshcci will only be applied i*f 
the 6cm 七 eivt is \rc^dcvcd ov\ a device ( 七 hai is, a pv-*micv). 


w pvm 七 ” is a 灼 。七 kv media *typc- 


Referencing the print media type like this is a common approach to 
creating print stylesheets — that is, CSS styles that only get applied when 
the content is printed. 


Media types, meet media features 

You have certain features — your age, your height — and so do media 
types. And just like The Splendid Walrus might want to establish a rule 
that requires the minimum age of patrons to be 21 before they apply 
alcohol, we might want to define certain CSS that we only apply to 
browser window widths within a certain range. 

We’re in luck! width, along with color and orientation, is one 
of the media features defined in CSS3 for all common media types. 
So, again, media types have media features. 

Media features on their own don’t get us very far. We need a way to ask 
the browser about the states of the ones we care about and, well, do 
something about it. That ? s where CSS3 media queries come in. 



-fev/ of w sdvccr^ W 
media -typers media -fcaiuvcs. 


P S. Thc\rc B^rt rwovc- But these 

the most useful "to us. 
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CSS media queries 


Vidih w is a media -Pca-tuv-c 
' / wa 灼七 "to evaluate oy \ 七 he 

f media -type- 


\octtii 1 media tyfe, v/e 州《七 aja'm. 

@media screen and (min-width : 480px) { /* CSS Rules */ 

mm— is a medid ^ucv-y pvc-P'nc. Ra-thcv- 
m-tuitivcly, i*t rwca^s wc waivt "to «\ucv-y ,.. 

.• ' 7 l/UsuV,sm 外七 «s 

also a Va% 」 ？士 . 


These CSS v-ulcs will ohly 
applied i-f -the media q ucv -y 

r- evaluates t> TRUB. 


dbou 七 d mi 灼 imum v/id 七 h. 


This means: are we presently rendering content on a screen, 
AND is the window currently at least 480 pixels wide? 

Yes? OK! Apply these CSS rules. 

Another example: 

@media print, screen and (monochrome) { } 

Lo^i^al w o^ is vcpv*cscr\*tcdl by a ^rwo^odhv-omc^ is a media -Pcaiuv-c 

a lort to^usmj. <^P ihc VmeW media -type- H 

is ciihe\r TRUB ov- FALSE- 


£.ommd- rt’S a 


Is this being rendered on a printer OR is it being rendered 
on a screen that is monochrome (black and white)? 

Yes? Use these styles! 


CSS3 media queries are 
logical expressions tkat 
evaluate tke current 
values ol media features 
in tke user’s trowser. 

II tke media cjueiy 
expression evaluates as 

TRUE, tke contained 
CSS is appliect. 



ExenctSe 


@media all and (orientation : landscape) { 







Translating CSS media queries: You try it! Match the media query and its meaning. 


Apply the rules in this external 
stylesheet to color screens. 

Apply these styles to 
black-and-white printers. 

Apply these rules to 
color screens. 

Apply these styles to all 
media types when in 
landscape orientation. 


<link rel= n stylesheet" type="text/css’ 
href="my.css n media="screen and (color)" 




@media screen and (color) 


卜 
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how different? 



SoLytlOH 


Were you able to decipher the media queries? 

Media type o( “all/’ you ask? Yep- This is y/hat 
v/c use i-r v/c ⑹如 七 to look at "the same medid 
-Pcatuvc adiross all media -types 



@media all and (orientation : landscape) {} 

<link rel= n stylesheet" type="text/css 
href= M my.css" media= M screen and (color)" / > 




Apply the rules in this external 
stylesheet to color screens. 

Apply these styles to 
black-and-white printers. 


Apply these rules to 
color screens. 

Apply these styles to all 
media types when in 
landscape orientation. 



OK. Now I can understand media 
queries and maybe even write my own. 

But what am I doing here? How do I write 
the CSS for mobile devices? 


CSS: How different is different? 

We have a tool that lets us apply different CSS to different 
situations. But now what? 

Don’t panic. We do need to write some mobile-friendly CSS, but 
we’re not going to have to start from scratch. Nor are we going to 
have to have totally different CSS for our mobile devices — we can 
share a lot of what’s already there. 


To generate our mobile-friendly layout, we’ll: 


Check out the current layout of splendidwalrus.com and 
analyze its structure. 

Identify layout pieces that need to change to work better on 
mobile browsers. 

Generate mobile-adapted CSS for those identified elements. 


Organize our CSS and selectively apply the mobile and 
desktop CSS using media queries. 


il ohly 

CSS 

-those layout 

tha-t heed 
_ be di-Pfcirch-t 
loir mobile- 
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getting started 


The current structure of the Splendid Walrus site 

Take a peek at the index.html file for the Splendid Walrus site in the chapter 1 
directory. If you use your imagination and strip out the content, you can 
see a basic HTML page structure like this: 


T\\t 七 Wrcc wa •… 

C • 。扒 七 €灼七 C.oluwy\s 


<div class= M navigation n >...</div> 

<div class="header n >...</div> 

<hl>...</hl> 

<div id= n visit n class= M column n >...</div> 
<div id= n points" class= n column n >...</div^ 
<div id= n main n class= n column n >...</div> 
<div class= M footer n >...</div> 


Putting the \rigli 

匕 olur»m bc-Po\rc the dChtcv- 
匕 olunrm ih the markup is 
如 old tv'ulk o-f the web 

dcsijh bradc it makes i-t 
casiev -fco handle layouts 
us'mg CSS -Ploa*ts. 


The current, desktop-oriented CSS lays out the page like this: 


<h/>^ 


_1 








The Splendid Walrus ： Public House < 

5c Spirits 


dW^visi-t 


div.-Poo-t ， 


t>r 


D 


N I 



dw 养 


m 


div.havija-tioh 


divheadev- 


div 养 pom*ts 


Let’s go look at the CSS that 
defines the layout and figure out 
what needs to change to adapt it 
to be mobile-sized. 
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now showing css analysis 


Analyze the current CSS 


Open the styles.css file for the 
Splendid Walrus site. 

There’s a bunch of CSS at the top 
of the file, but we don’t have to 
worry about that. We can share 
the same colors, typography, and 
styling across both desktop and 
mobile variants. 

What we care about is the 
structural CSS, near the 
bottom of the file. 

UcM (Visi-t, ay^d 

pomts) v^as a I Op at 

•bo? ad a wa—"a 七 

(a k a. a 、认七七吖 ）. 

The havigatioh lihks a\rc ih a <ul>. 
Lay it out hov-izohtally a^d 
cadh <li> spah l/Z o-f the 
page width. 

B3£.h <|i> j/3 o-p 

the page width because 
thcire aire thvee |i h ks. 


TV>c \t^i 叫 Wt 

toluw^s av-c 2A0 
pixels Wide float ^ > 



丁 lie dolumh uses 

^a\rgihs -to positioh 一 
'■tsd-P-i-t doesh'-t -float. 


Its lc-P*t rwa\rg'm o( 
and \rijhi rwa\rg*m o( 
posi-ti oy\ i-t \v\ 七 he w’mdow. 



iVeYe only ir)ic\rcsied \ y \ -the s-tvudWal 
pa\rt o-P -the CSS -Pile. 



* Structure */ 
body, .header, .navigation A 
width : 960px; 


footer 


•header, .navigation A .footer 
clear : both; 

} 

.column { 

margin : lOpx 1Opx 0 0; 

} 

.navigation { 

min-height : 25px; 

} 

.navigation ul li { 

width : 32Opx; /* 960/3 */ 

} 

.header { 

background : url(images/w.png) 
height : 200px; 

} 

#visit { 

width : 24Opx; 
float : left; 


The body is °{iQ pixc | s 

〜十 . The header 

ahd c l c ^is 

"the -full wid 


spah 


width. 


Because *bV\csc eleweyrb 

^ull WidtK 州 akc 

suve is 七 m 3 

*to 七 W. 




dea\r:boih jus 七 c^suv-cs 
"thai ihese dcmc^is 
s*t3\rt ov\ d r>cw 一 
is, 

is "to 七 herw. 


no-repeat; 


headeir has a b 把 ky*ouhd 

1 州 age, so it heeds -to be 

ZOOpx hi^K -to show dll o( 

"the 


#points 

width 

float 


240px; 

right; 


#main { 

margin : 1Opx 260px 0 25Opx; 
width : 4 6Opx; 


|*t seems like *thc 
to\\Avrv\ should be 千召 0 
Vide (^O mmus *thc *bwo 
2.^-0-f*i%cl Ic-fi air>d 

dolur»ms). Bu*t rt’s pixels 

v/idc *to addou^ -fov 七 he *t>wo 
IO-f*i%cl ^ui*tcv-s bc*t>wccr> 

*tliC dolumy>s. 
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getting started 


What needs to change? 


O Make the page and its structural elements 
fit within 320 pixels. 

As Frank mentioned on page 9, 320 pixels is a 
common screen resolution for mobile devices. 

Reduce three columns to a single column. 

In the original, desktop layout, three columns felt 
“crunched” on a mobile screen. 


We 5 re not going to have to 
// 1 rewrite all of the CSS. 

P — f 
the structural layout elements. 

The rest — typography, colors, and whatnot — can 

stay basically unchanged. 


For mobile, we need to go from this.., 

div.Wiyticw 


^ dolurwn layout desired 


"to -fi-t \v\ °(^0 pixels 


<hl> 


div 养 visit 


div.-Poo*ti 


C\r 



□ 




divhcadcv- 


.to this 








A dolurwh layout 
siz^d -Pov- a ?ZO-pixcl 
b\roy/sc\r width 

/ _ 

div.havigatioh 


'div.hcadcv 


<h/>^ 


div^v'is'i-t 


yf 



div^pomts 


VLO pixels 
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mobile css adaptations 


Identify the CSS that weeds to change 


The highlighted code will need to be 
adapted for our mobile version. 


d 七 ^ pay a”d ^ kaden 

於 av 吵 W, 枷 d ^oo-tev demits. 


ih 


後 do^i hged this vulc i 
ou\r mobile vcvsioh (but it 
docs^i hu\rt ahythihg). 

^ausc hotWm— boated 
m OUV- mob«lc lavou-b, tlca^rs 

avc^*t v'C^cssav'Y* 

This is actually we 
wah-t the hoivigatioh I'mks 
■to be ai least -this tall. 

We v\ttA -to adapt *b^c 
y\3v'i^at»oir\ I'mk y/id*tV)S *to 
•Pi 七 tV^C smaller sC>rttv\. 


I/Vc y\ttA "to verwove "the 

-Ploa-b and the 

v/idih of -the visit a^d 
pomts doluimiDS. 


/* Structure */ 
body, .header, .navigation, .footer 
width : 960px; 


•header, .navigation, .footer 
clear : both; 

} 

.column { 厂 

margin : 1Opx lOpx 0 0; 


.navigation { 

min-height : 25px; 

} 

.navigation ul li { 

width : 32Opx; /* 960/3 * 

} 


TV Yoluwms” cm 七 ^ mobile 
lavou-t Will lay out vc\rt^all7, 
\,or\zx>MWf UVs add 

beWe^ tolum^s (vcrUalh/) w 七 

^c*t v->d o-f *b^c yttev. 


iVe’ll use 七 he same badkyou 灼 d 
irwajc -Pov -the header so -this 
/ 乙扣 s-tay 七 he same- 


.header 

background : url(images/w.png) no-repeat; 
height : 2 OOpx; 

H 你 ijlvt sccrw like we v/ould y\ttd 

■to adjus-t -the 2.00^% heigh 七 hcv-c 
bu 七 v/e dov\i because v/ell use 七 he 
same 




#visit { 

width : 

24Opx; 

float : 

lef t ; 

} 

#points 

{ 

width : 

240px; 

float : 

right; 


-fov- 


#main { 

margin : 1Opx 260px 0 25Opx; 
width : 4 6Opx; 


We r\ccd *bV^c maq … s 

fositiemi% 谷中。代 

y/ill span full air\d 

v,e heed bo c\\a^t tKc ^\dh\ 
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styles.css 








getting sfarfec/ 


Steps to creating the mobile - specific CSS 

O Change the width of the highlighted CSS rules. 

❺ Get rid of the CSS rules we don’t need. 

^ Factor out the common CSS rules, d。&is m just a 



Motile CSS Magnets 

Use the magnets to build the mobile-specific CSS. 



body, .header, .footer, .navigation { 


.column { 


border-bottom : Ipx dashed #7b96bc; 


navigation ul li 


TWis bovdev- is -to add some 

visual sc^avat»o^ 
tolum^s vcvt»^al) as 
i\\q la^ out ov^ 


#visit, #points, #main 
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mobile css in four rules 



Motile CSS Magnets Solution 



Ta - da! Mobile-specific CSS 


And we’re done! These four CSS rules are all the 
mobile-specific layout we’ll need. Now we need to be 
sure they’ll get used by mobile devices. 

And how will we do that? Our old friend Mr. Media 
Query to the rescue! We’ll generate a media query 
shortly to apply this CSS to devices with a browser 
window of 480 pixels wide or narrower. 


{\\t resolution -for {}\t 
w |o^ s.dc^a.k.a. 
ov-'icyrta*tio^) ok 州叫 
pofuUv" Sm3V"*tf^o\r\CS. 
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Wait a minute. Some of 
the CSS rules disappeared. 
Whered they go? 


They didn’t disappear... 

,..they just don’t need to be contained inside our 
mobile-specific CSS. Why? Because the CSS 
rules in question are going to be the same for 
both layouts (desktop and mobile). 

We’ll put the shared CSS outside the media 
queries so that we don’t have to have the same 
CSS rules in two places. Let’s do that now. 














getting started 


The rest of our structural CSS 


Shared structural CSS 

See? Told you! None of the CSS actually 
disappeared. Here’s the shared structural 
CSS that we identified on page 18, factored 
out and ready to go. 


header, .footer, .navigation { 
clear : both; 

} 

header { 

background : url(images/w.png) no-repeat 
height : 200px; 


navigation { 

min-height : 25px; 


Our desktop structural CSS 

We still need to have good CSS for desktop browsers! 

After we remove the common structural CSS 
rules, here’s what we end up with for the 

desktop-specific CSS structure. 


We’ll need to use a media query so that only 
viewports 481 pixels and wider apply this CSS. 


What's next? 

Let’s check in on our to-do list for creating 
structural CSS that works for both desktop 
and mobile browsers: 


El 



Check out the current layout of 
splendidwalrus.com and analyze its structure. 

Identify layout pieces that need to change 
to work better on mobile browsers. 

Generate mobile-adapted CSS for those 
identified elements. 


body, .header, .footer, .navigation 
width : 960px; 

.column { 

margin : lOpx 1Opx 0 0; 

.navigation ul li { 

width : 32Opx; /* 960/3 */ 

#visit { 

width : 24Opx; 
float : left; 

#points { 

width : 24Opx; 
float : right; 

#main { 

margin : lOpx 260px 0 25Opx; 


Organize our CSS and selectively 
apply the mobile and desktop CSS 
using media queries. 
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one last thing... 


Put it together 


Here’s how we’ll put together the updated version of styles.css. 



@media screen and (min-width : 481px) { 



@media screen and (max-width : 480px) { 



didn’t make 

-to -this 

favl o( the CSS. 



styles.css 


One last thing 


You’re going to need a viewport <meta> tag in the index.html file. These tags help 
tell the browser how “zoomed in” to render the content. We’ll be taking a look at these 
guys a bit later on, but for now, just take our word for it: you’ll want one of these. 



chapterl 


<head> 

<meta http-equiv= M Content-Type" content= M text/html; charset=utf-8" /> 

<meta name="viewport" content="width=device-width , initial-scale=l M /> 

<title>The Splendid Walrus : Public House and Spirits</title> 



index.html 



images 



point.png 



sample.jpg 





'•png 



index.html 



styles.css 


22 Chapter 1 






































getting sfarfec/ 




this! 

♦ 0 ) 

平 

e 


o 


o 


o 


Edit the index.html file. 

Drop in the viewport <meta> tag from page 22. 

Open the styles.css file. 

You’ll be replacing the structural CSS rules near the bottom 
of the file. Remove the existing rules for structural elements. 

Add the common rules. 

Add the shared structural CSS rules from page 21. 

Add the desktop- and mobile-specific CSS. 

Add the desktop rules (page 21) and mobile rules (page 20). 

Wrap the desktop- and mobile-specific CSS in media queries. 


^fesT Drii/q 


Add the media queries (page 22). 


Once you’ve made these changes, load the index.html file in 
your desktop browser and resize the window to less than 481 
pixels wide to see the mobile-friendly layout. 

^3 n 





The Splendid Walrus: Public House & Spirits 


Visit Us! 

Location 

1543 SW Preceiui Street 
PoitUnd, OR 97201 (Mifi) 

Hour* 

M F 

Until midnight 
S«Su 
Until 1AM. 


This month*s special 


Vodk^loolty-i 

e nevrett product i 


made vodka bibs. 


25% ofTJaxz Hsnd> 

Jizz Hands Vodki if the nrwrcit product from local disdlkr 
Awc»o«nc>tucc. Bright uid vivid, it't the perfect w«nn-wcmthcr 
treat We've concocted *om« pretty wondeifal custom cocktails ' 
highEghl it (dy th« White Devilof the Regret). Or you c»n go clastic 
w»A our uhn-fte«k L«roon Drop (m«de with ocgtnic citrut). 


’Akmt 

Can lit 


♦1(S03) 555-1212 





The Splendid 
the place i 
Pordind, Ore., 
theM things: 

Sample local and 
find nacfobwwt 
least 20 rotating fl 

Meet friends tnd 

Surf Ac Web wfc 
ft pint (£xc wifi!) 

Catch a cuk flkl 
Moodayt!) 

Haw & fivodte < 
itmplc t|>irio & 
distillene« 





丁 he page still looks the sar^c ^ 
ih desk-top b\rowsev"S … 


..MY\h\ brov/s^r wmdow 

>s less 从扣午别 
you dan see 
layou*tf 
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neat proportions 



This is a good start, but there's a bit of a problem. 

If I scroll down on my iPhone, you II see that the photo is 
too big for the page. It breaks the layout. 



Frank: This is really frustrating. I thought the mobile CSS we created would fix this. 

Jill: Your CSS makes the layout fit on a smaller screen, but it’s still pretty rigid. I 
mean, look what happens if I put my iPhone in landscape orientation. 

Frank: Ugh. The layout is still 320 pixels wide.. .but on a 480-pixel screen. Am I 
going to have to write different CSS for every single different possible viewport size?! 

Jill ： See, this is where Responsive Web Design practices could help us. Right 
now, you’re delivering a rigidly sized structure to all browsers whose current 
window is 480 pixels wide or smaller, no matter what the actual specific browser 
window width is. That’s not very flexible. I mean, not all mobile devices have a 
320-pixel-wide browser window. 


Responsive design helps us adapt our layout to different situations. Instead of 
dictating the exact size of elements — that is, using pixel-based measurements in our 
structural CSS like we are now~we can use a proportional layout, which adapts 
much better for different users. 


Frank: Proportional? Is that like ems and percentages and stuff in CSS? 


TVis pho-to is widcv thah 

bv-cakihg out 
° + the layout. 



Jill ： Yeah, sort of. We can use percentages instead of pixels when we code up our 
layout. That way, content stretches and shrinks to fill available space — kind of like 
water filling in gaps. That’s why this kind of layout is often called a fluid layout. 
And, by the way, this will help us fix that wayward image as well. 

Frank: So, all of that work with media queries was wasted time. 

Jill ： Not at all! Media queries are a big part of what makes responsive design work. 




and hard 
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•AT&T 守 

ultra-fresh Lemon Drop (made with organic 
citrus). 


10:33 AM 


(a" (I 


55 父 


soon! Love, The Splendid 


The next step to move toward 
a responsive design — one that 
will work more comfortably 
on more devices and 
browsers — is to convert our 
fixed, pixel-based layout to a 
proportional, fluid-grid layout. 


TKc YouTube video is still 
bv*okcir> OY\ •this iPhone- 
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Tonight，s talk ： Fixed Grid meets Fluid Grid 


Fluid Grid: 

Hey, Fixed Grid. I know you’ve been around a while 
and seen a lot of action. But, no offense, there are a 
few problems with your philosophy. 


I mean.. .you’re kind of a relic. Your rigidly defined 
dimensions make you seem brittle and inflexible. 
That is, you’re not responsive. 


You don’t respond to changes in your user’s 
environment. You stay the same, always. 


At the cost of your users. Look at what happens when 
we look at you in different browser window sizes. 

Stuff is cut off, or there’s a bunch of blank space. 


Maybe that worked in your day, but these days there 
are simply too many kinds of browsers and devices. If 
you’re willing to let go of pixel-perfect layouts — hey, 
they’re a holdover from the old print days of yore, 
anyway — and let your content flow, like water, into 
the available space in the browser window, you can 
really adapt for different situations. 


Fixed Grid: 


What’s that? What’s a young upstart like you know 
about philosophy? 


Responsive? 


What’s wrong with tradition? Fm staying true to 
what the designer intended! 960 pixels wide, with 
240-pixel columns on the left and right. 


If users don’t like it, they should straighten up, get a 
haircut, and use a standard browser. 


Well, pipsqueak, show me what you’ve got. 
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oh, for a pixel-perfect world 


Whafs wrong with a fixed-width 
layout awyway? 

If the whole world were full of browsers whose windows were 
always the same size, it would be a safe, pretty world in which 
designers could have pixel-perfect control over what a website 
looked like. 

Unfortunately, the Web has never been this controllable. 
Sometimes we try to design around “standard” window widths 
like 640, 960, or 1,024 pixels. But that is mostly an illusion: 
there is no standard browser window size. And that’s before 
you even start thinking about mobile devices. 

Sure, the fixed-grid layout for The Splendid Walrus looks fine 
at 960 pixels wide. 


TV>c s*i*tc *m a 

^ ^ 0 -p*ix.cl v/'mdov/ 



ISO SW Pannd Sot 


UoallAM* 


C 滷 US 

•I (XI9»35M2L2 





Tins month's vecial 




I V«dk*: locslh MIm. 

tea Nm«i Vote tea ftxafidMaw 

AvcKmawr aetf MM. 

W •、零 pwo> nwacm rwrlalm ■ 

(iy te at 0 > >«• cm fo cIhA: • tti (M «!■»■ 


t* Mtfr at *e Ol >«• fo _ 

(Mb Lmmm Dnp Conte •• atfaA; 


Tl» SpAmdU M-nu it 
fAkoc la tewvtow 騰 

PwHud. Or*^ to —il «f 


>3" SM9*leaya(iill«f«K> 
(Mnoctavr* -■»>«)*• 


km J> matt 明 

lO, MaaMaAMi —mi 

1 ^* CmA • nk fkfc Cnu« 1 > 




• cocttaloi 
Ira local 


The layout doesn't adapt to other window sizes 

But in a narrower window, look what happens. The column 
widths stay the same, which means content gets cut off and the 
user has to scroll horizontally. Ick. 

T\\t s*i*tc vicv/cd *m a — 

* 700 -fi%cl y/*mdoy/ 


In a wider window, the entire layout is still only 960 pixels wide, 
leaving a blank gap of wasted space at the right side of the 
screen. Hmmm. 



The si*tc viev/cd *m d 
I,ZOO - pixel v/mdlov/ 



Ti^C dolumir> 

•isy>’ 七 Visible 
v/rthou 七 sdv*ollm^. 



Lc-ft Bv\d Vijlit 

^olur^hs a\rc Z 午 O 


The Cir>*t*iV-C V/id 七 V> is 


P'^cls widc...always. 


dor>s*tva'mcd *to f 
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How is fluid better? 


Fluid-grid layouts use proportional units (percentages) 
instead of pixels for widths. We can stay true to the 
designer’s vision of having the left and right columns 
span one-quarter of the page width by defining their 
widths as 25%, instead of 240 pixels. 


A ^lu'id vcv-s*ior> o( 七 he layout 

a*t pixels. |*t docs^*t -- 

look vcvy v*i ^> 七 

Y\ 0 ^l) does I 七？ 



The Splendid Walrus: Public House Sc Sraars 


ISO sw Pannd Sot 


te«i 

UoallAM* 






Tins month's vecial 




I V«dk*: locslh MIm. 

tea Nm«i Vote tea ftxafidMaw 

AvcKmawr aetf pn*« MM. 

W •、零 pwo> nwacm rwrlalm ■ 

(iy te at 0> >«• cm fo cIhA: • tti (M «!■»■ 


(” t* Mtfr at *e Ol >«• c« fo _ 

(Mb Lmmm Dnp Conte •• atfaA; 



Mm«arrciM<oc«BMUOi 

Moote m ： 


The layout adapts as the window changes size 

In different window widths, the content flows, like water, to fill 
the available spaces in the layout. The left and right columns 
always take up 25% of the window, and content is not clipped 
in narrower windows, nor is there any empty space in wider 
windows. 
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We’re about to convert both the 
desktop and mobile CSS from fixed 
to fluid grids. Can you think of some 
ways this might help solve some of 
the problems Jill found with the site 
on mobile browsers? 
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go with the flow 


fro fluid 


There are a number of things we’ll need to do to address the problems 
Jill found and move toward a responsive design. 

Convert the pixel-based layout to a fluid one, using 
proportional widths instead of fixed. 


Make the default body font size 100% so our page’s fonts 
can scale up and down proportionally. 

Fix the broken YouTube video. 


|-f y/cVc *to make ouv* 

layout well wayrt 

■to be suV"C oiav* 3V"C 

-flexible, boo. 


Fix the image that is too wide. 


The fluid formula 


To convert a pixel-based layout to a proportional, fluid one, 
use this formula: 


eleme 此 m ^ Target 


The siz^ o-p 

匕 oirtaihihg 

7 。士此 ’’ ih pixels 


Context 


=Result 


'Ouv- Y\t^, pv-ofovt»oy\al CSS 
vule, as a 


A closer look 

Let’s take a look at what this means, using the Splendid Walrus 
site’s desktop layout. 

We start with a context on which to base our proportions. In 
this case, our reference design is 960 pixels wide. We want 
our resulting, fluid layout to have the same proportions as the 
current design does. So we’ll base our calculations on that 
960-pixel baseline. 

The navigation, header, and footer all span the full width of the 
page. That makes the fluid formula very easy to apply indeed! 


960 pixels 
960 pixels 


二 1 00% 
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Continue your fluid conversion 


The left and right columns are both supposed to be 240 pixels wide, relative 
to the 960-pixel containing context. To get a proportional measurement, use 
the fluid formula again: 


240 pixels 
960 pixels 


TKc doluwms sf>dir> a <\ua\rtcv 

25% ^^ of 七 he pay N/idth. So this 

-Peels m-tuitivc, 


The main, center column is a bit different. It doesn’t float. Instead, margins 
are used to position the element. But that’s just fine. We can still use the 
fluid formula to convert the pixel-based margin sizes to percentages: 



Our updated CSS rule 


#main { 

margin : lOpx 27. 0833333% 0 26.0416667%; 





Finish converting the structural desktop CSS rules 
in styles.css to proportional widths. You'll want to 
edit each of the six CSS rules within the media 
query for window widths of 481 pixels or greater. 



Dumb Questi9ns 

Why are there so many decimal places in 
these numbers? Do we really need all that? 

We’re demonstrating the purist fluid-grid 
approach here, which builds CSS units exactly as the 
numbers come off the calculator. 

Realistically, browsers round these very long numbers. 
And—a bit concerningly—they round them in slightly 
different ways. 

So, it’s up to you. You might consider rounding the 
numbers down to one or two digits past the decimal 
point. Another approach is to leave some play in 
your layout—a percentage or two not accounted for 
at all. Your grid won't be as precise, but you avoid 
some of the pitfalls of rounding issues and make your 
arithmetic less rigorous. 

Wait. Why is the top margin on . main still 
lOpx? Isn’t that...wrong? 

Vertical layout is a totally different beast than 
horizontal. We can’t use the 960px context because 
the height of the design is never really a known 
quantity, and vertical layout using percentages is a 
tricky affair, supported in different (and sometimes 
poor) ways in different browsers. Using pixels like this 
for vertical margins is OK. 
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fluid desktop css 



Let’s take a look at that fluid desktop CSS. 
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@media screen and (min-width : 48lpx) 

body, .header, .footer, .navigation 
width : 100%; 

.column { 

margin : lOpx 1. 04166667% 0 0; 


.navigation ul li { 
width : 33. 333333% 


#visit { 

width : 25%; 
float : left; 

} 

#points { 
width : 25%; 
float : right; 

} 

#main { 

margin : lOpx 27. 0833333% 0 26.0416667% 

} 





So, to convert to a proportional width, 
we divide the pixel width of an element 
by the overall layout width, right? 


Not so fast! 

Sometimes the “context” can change, 



























getting sfarfec/ 


Context switching 



0 


Hey. rm going to start offering 
some new beer specials, and I want to 
be able to feature those on the site- 
can you adjust the design? 



Mike has a new monthly special that he wants to post on the 
Splendid Walrus site. Instead of text and a single image in the 
main column, as it is now, he wants to display the beer labels 
of two very special, limited-edition stouts — floated next to each 
other. In our pixel-based reference design, this looks like: 



It’s tempting to think that the formula for converting these 
image widths to be fluid would be: 


220 pixels 
960 pixels 


二 22.916667% 


Does this formula look right to you? 
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watch your contexts 


Whafs wrong with this picture? 

The context changed! 

If we set the images to span 22.9166667%, they will span 22.916667% 
all right 一 22.916667% of their containing element. 

The containing element of these images isn’t body (100% width, 
or 960 pixels in our reference design), it’s div#main, which has a 
width of about 460 pixels (47.91667% of 960 pixels in proportional 
parlance). So we have just told the images to span a little less than 23% 
of 460 pixels — too small! 


220 pixels 
960 pixels 


二 22.916667% 



TV’s is v/hat you II i-f you sc-t tliC width o( 
irwj. label -to be /o. Uh oh- 


Instead, we set the context in our formula to be 
the reference width of the containing element, 

which in this case is 460 pixels. 


The a\rc r>ow jus*t 

u 灼 de\r ^0% o( -the v/idih o( 

div#rwa*m—rwo\rc like it 



fills! 


220 pixels 


47-826087% 


460 pixels 

、 Kcw width 

乙。山 ’mmq {，- 


Setting image widths as percentages? 
Turns out, this is on the right track to 
fixing one of our other problems with the 
mobile layout. Remember that photo that 
is too big and messes up the page width? 
We can use a variant of what we’re doing 
here to fix that! 
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getting sfarfec/ 


Fluid images ^_ /w 

There’s a lot of power in this little gem of CSS: 



With this quick addition, we help to prevent any image or 
embedded media object from being wider than its containing 
element. Because they are limited to 100% width —100% of the 
width of their containing element — images and media obey their 
parents and don’t try to break outside of the boundaries. Nice! 


Fluid images 
and media, like 


fluid grids，scale 
proportionally 
witkin tke layout. 


A sad farewell... 

Most great things don’t come without a bit of sacrifice. To 
use the fluid technique on images and media, we have to 
forego our old friends: the width and height attributes. 

The CSS rule above will override a width attribute but will 
not affect a height attribute. That means that, if we use 
height and width attributes, we could end up with an 
image that scales its width but not its height. End result: a 
sad-looking squished image in the wrong aspect ratio. 


OK, there are some workarounds for this, and removing 
these attributes is not awesome. But we’re going to jettison 
the height and width attributes for now. 



Fluid images are not 
a get-out-of-jail-free 
technique. 

Just because an image 


scales down on a 

narrower screen doesn’t mean that it 


isn’t still, at heart, a large image. An 
800 KB JPEG is still an 800 KB JPEG, 
even if it’s crammed down into a 


120-pixel-wide column. 


In Chapter 2, we’ll talk about 
techniques to deliver different images 
to different devices and browsers, 
saving on otherwise wasted bandwidth 
and processor power (required to do 
the actual scaling). 

Still, it’s a powerful technique, and one 
definitely worth having in your arsenal. 
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fluid mobile css 


Are we there yet? 

We’re making progress toward a responsive design that adapts to more 
devices. But we have a few things left to track down: 



Convert the pixel-based layout to a fluid one, using 
proportional widths instead of fixed. 

Make the default body font size 100% so our page’s fonts 
can scale up and down proportionally. 


S*ti|| heed "to 乙。 hW 七 

the mobile CSS (wc did -the 

desktop CSS already). 


Fix the broken YouTube video. 


V Fix the image that is too wide. 



We did us*m^ 
•fluid images 


Spiff up the mobile CSS 

There are just a few mobile-specific CSS rules we need to convert to be fluid. 


@media screen and (max-width : 
body, .header, .footer, .nav 

width : 320px; 

.一 { 

margin : lem 0; 
border-bottom : Ipx dashed 

at 朋 U1 u ( 

width : 106.6667px; 

#visit, #points, #main { 
width : 320px; 


@media screen and (max-width: 480px) 

body, .header , .footer , .navigation 

width: 100%; 

} 

column { 

margin : lem 0; 

border-bottom: lpx dashed #7b96bc 


.navigation ul li { 
width: 33. 333333%; 

} 

#visit, #points, #main 
width: 100%; 

} 


^ wcv c 

P^pov.-tio h al -these -two 

r Ohcs Gcc pa 3 c loi 

L ^'9^ pu-t ih 
?T° h s ^ u ^l CSS instead 

ih -two pla^s 


current (fixed) 


updated (fluid) 
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getting started 


Pctails, details 

Let’s take care of a few remaining details to make our 
updated version of the Splendid Walrus site totally responsive. 


fmt Up Ckse 



Setup flexible fonts 

So far, our layout is adaptive, but the fonts are stodgy 
and rigid. Just as percentages are the fluid ying to pixels’ 
fixed-width yang, ems are proportional font-size units. Mike 
used ems in his original CSS, so we’ll just add the following 
rule to the <body> element to be extra thorough: 

body { 

background: #f9f3e9; 
color : #594846; 

font : 100% "Adobe Caslon Pro ", 

’’Georgia", "Times New Roman ", serif; 


With this edit to the CSS rule for the <body> 
element, we’re setting the baseline font size 
for the page to be 100%. But what does 100% 
mean? Here’s a quick-and-dirty (and approximate) 
rule of thumb: 

lem = 100% « 12pt » 16px 

But recall that we aim to adapt our content to 
the user’s environment. If a user has changed 
the browser’s font size, 100% is going to 
represent a different absolute size. 

Also keep in mind that fonts on mobile devices 
are a complex thing, and that in some cases, 

1 em might equate to a (significantly) different 
point or pixel size. 


This baseline font-size reset is the CSS equivalent of dotting our 
f’s and crossing our t’s: it’s setting an explicit reference against 
which the other font sizes in the CSS are defined. Not a big deal; 
just keeping things tidy! 


Fix the YouTube video 


Lots of mobile devices don’t support Adobe Flash. The marl 
for the embedded YouTube is out of date: YouTube now provides 
an iframe-based embedding snippet that will work just fine on an 
iPhone (and other modern devices). We need to edit the index.html 
file and replace the current embed code. 


<object width="230 n height="179 n 
type="application/x-shockwave-flash" 
data="http :// www.youtube.com/v/0- 
j OEAufDQ4 ?f s=l&amp; hl=en 一 US&amp; rel=0"Xembed 
src=.. . /></obj ect> 




Use 


I^s-tcad o( -thi 


p, . I L\ ••- w.asi. as VJCll- 


S 


<iframe src= M http :// www.youtube.com/embed/0- 
jOEAufDQ4" style="max-width:100%"></iframe> 


(Plash- only) veirsioKt 

YouTube’s newer embed code determines the 
appropriate video format to use depending 
on the browser. It can supply HTML5 video 
instead of Flash for devices — like Mike’s 
iPhone — that support it. We simply grabbed 
this newer snippet from the “embed” section of 
this video’s YouTube page. 
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flex your rwd muscles 


Remember to be responsible 

Just like fluid image resizing doesn’t actually reduce the file size of 
images, neither does fluid media change the size of the actual media. 

It’s up to you to determine whether using video (or other multimedia) on 
mobile devices is worth the file size and processor oomph required for 
playback. 



ExeRciSe 


OK! Let’s get all of these changes in place to give The Splendid Walrus a mobile-friendly site 
that uses Responsive Web Design techniques. 


Edit the styles.css file 


o 

❺ 


Edit the CSS rules within the media query for lower-resolution devices. 
Convert these widths to be proportional (page 34). 


Identify the structural CSS rules that are common between both mobile 
and desktop variants now that they are proportional (page 34). Remove 
these rules from the media-query-specific sections and put them in the 
common structural section of the CSS file. 


❺ 

o 


Add the CSS from page 33 to implement fluid images (and media). 

Update the CSS rules for the <body> element to add a proportional 
font size baseline (page 35). 


Edit the iwdex.html file 



Replace the Flash-only embedded YouTube with the smarter, if rame 
variant on page 35. 


Try resizi% youv bv"ov/scv- 

y/nr\dioy/ 七 

adapt 

o Save your changes and load the index.html page in any web browser. 


Let 'cr rip! 
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getting started 


OK. I’ve seen ems as units in CSS, 
but I don’t quite get it. Whafs the point? 

lem is—unspectacularly—a 
representation of the current font size, in the 
current context. That doesn’t sound terribly 
exciting. But the magic comes when you 
define your font sizes in relation to this. So, 
if you set your <hl> element to display at 
1.5em, it will be 1 50% of the baseline font 
size of its containing element. 

You can actually use the same fluid formula 
to generate fluid, em-based font sizes from 
fixed font sizes. To create a fluid version 
of an 18-point font in a context where the 
baseline font is 16 points, you can do 
18/16 = 1.125 em (target/context = 
result). 

Wait. Why is it 1.125em instead of 
112.5%? 

Mostly tradition and clarity, but ems 
do tend to work a smidge better across 
platforms. It is common web practice to 
define block element widths in percentages 
and font sizes in ems. With some really 
teeny exceptions, percentages and ems are 
interchangeable for font sizes. About those 
teeny exceptions: we set the <body> 
element font-size to 100% to account 
for them. 


tJiereiare no ^ 

Dumb Questi9ns 


Is there any other use for CSS 
media queries beyond the mobile web? 

Definitely. An example: just as mobile 
devices often represent the lower end of 
the screen resolution spectrum, some of the 
newer widescreen monitors and televisions 
have very high resolution. Sometimes it 
makes sense to adapt a layout—say, to add 
more columns—for these window widths. 

What actually caused the weird 
gap at the right side of the screen in the 
exercise way back on page 7? 

This one’s iPhone-specific. When 
displaying a web page “zoomed out” (i.e., 
when it’s acting like a desktop browser), 
mobile Safari on the iPhone assumes a 
viewport width of 980 pixels. Before mobile 
optimization, the Splendid Walrus layout was 
960 pixels wide, which leaves an awkward, 
20-pixel gap on the right. 

What’s the deal with the “3” in 
“CSS3 media queries ”？ 

There are several versions of CSS. It's 
tempting to say that there are three, but the 
situation is a bit more cloudy. CSS2, which 
was published as a “recommendation” way 
back in 1998, is the flavor with which most 
web developers have had a longstanding 
familiarity. Media types were introduced with 
CSS2. 

CSS3 is a different beast than earlier 
versions of CSS, in that it is modularized— 
there are something like 40 different 
modules, instead of a single big, complex 
spec. Fortunately, the Media Queries module 
is one of the more complete and stable. 


If CSS3 isn’t all the way “done,” do 
browsers support it? 

Like we said, it’s a jungle out there. 
Adoption for some of the more complete 
pieces of CSS3 is becoming widespread, but, 
as we’ll see a bit later, is far from something 
that can be assumed in the mobile space. 

Why does the right column show 
up before the main column in the mobile 
layout? 

The div#points content comes 
before the div#main content in the 
HTML markup. In the desktop layout, floats 
are used to position the #points content, 
such that it appears to the right of the 
#main content. The mobile layout doesn’t 
use floats, and as such, the content is 
displayed in the order it occurs in the HTML. 

You skipped the @import syntax 
for media types. And can I use @import 
syntax with media queries? 

@import syntax doesn’t get a lot of 
love. So little, in fact, that we didn’t even 
mention it. But, yes, it absolutely works for 
including stylesheets based on media types 
and for media queries, too. 
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exercise solution 



t°^S Exe^dSe 

^SotutvOH 


Let’s walk through the resulting CSS file and look at our changes. 


Tills is ir>C3V* 

•fcof of CSS -f ile- 



To save spade, >wc sho>w /...shav-cd -tyfoyafhy, dolovs, 

七 kse v-ulcs hcvc. 、 _( bovdev-s, c*td- (slaved, 

\ r>oy>s*tv*ud*tuV"aI CSS) .. 



Shaved s-t\rud*tu\ral CSS 



header, .footer { 
clear : both; 

,header { 

background : url(images/w.png) 
no-repeat; 

height : 20Opx; 


.navigation { 

min-height : 25px; 



img, object { 

max-width : 100% 

} 

.navigation ul li 
width : 33.333%; 

} 

•header, .footer 
width : 100%; 

} 
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getting started 


And now, the resolution-specific structural CSS. 


匕七 u\ral CSS lavjcv* 

bv-owscv- v/mdows (e g., desk-top) 




S-tv-ut-tuv-al CSS -fov- smalls 
bv"ov/scv" y/mdov/s 
mobile devices) 
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the walrus is splendidly responsive 


Thafs a responsive site! 



We’re using the same header background image in 
our mobile-optimized CSS, even though it’s getting 
seriously cut off. Can you think of how to use RWD 
techniques to use a different image (to save on 
bandwidth and improve performance)? 


You guys made big 
improvements, and 
hardly touched the 
HTML at all! 


On Tap Now 


Visit Us! 


I.ocatian 

1543 SW Pfetend Street 
Portland, OR 97201 

Hourft 

M-l 


_ __ _ 

- 

； - : 二 ，二 = 

25% off Jazz Hands Vodkas locally-made vodka bUss. Pord and, Ore. - J “ii ， 

…… — 麟，口 ? 工 CT — : ^ 

^- 1 •、盧 A . •的 H ft ^ ff 

中 ® ? 聲 ) E10D JUM5, 


25% off . _ 

,o 吻侧 4 ^ 

fr om H local S SC newest 陶⑽ 

Wonderful custonf SOnie pretty ^ 


The fV>o*to -f iis dov-vcd*tly T' 

。灼 七 his /Wv*oid Kc%us S 

*fco *thc -fluid 
images *tedVmi'ur 


On Tap Now 


The Splendid Walrus ： 
Public House & Spirits 


Visit Us! 


Location 


1543 SW Pretend Street 


Looking good Oh the /Wo-tovola 
Badk-Plip (/Udlroid) 
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Responsive design is also a state of mmd 


getting started 




layouts ar^d mstcad dcs.^mj ouv 

co^i *bo ada^t *to diHc'rc^ 

(bvov/scv- ov- dcvidc) c^v'i\ro^w>c^*b 


BULLET POINTS - 

■ The mobile web is not unlike the Wild West—it’s full 
of surprises and adventure. The mobile web browser 
landscape is diverse, and, sometimes, crazy-making. 

■ Just because we can use the same layout on a mobile 
device as in a “traditional” browser doesn’t mean we 
necessarily should. 

■ Responsive Web Design (RWD) is a collection of 
approaches to make our web content adapt to the user 
not the other way around (forcing the user to look at 
rigidly formatted pages). 

■ RWD is a combination of CSS3 media queries, fluid- 
grid layouts, and fluid images. It s also a way of 
thinking about layout and content. 

■ CSS3 media queries let us apply CSS selectively to 
different user environments based on the current value 
of relevant media features. 


Media types (e.g., screen, print, pro j ection) 

have media features (width, color, 
monochrome, orientation). It's these media 
features we evaluate in our media queries. 

A CSS media query is a logical expression. When it 
evaluates to true, the enclosed CSS rules are applied. 

A fluid layout is one that uses proportional widths instead 
of fixed widths such that the content of the page scales 
and flows naturally across a range of window widths. 

Fluid images are a CSS technique that keeps outsized 
images (or media) from “breaking out” of their parent 
elements when the parent element width is smaller than 
that of the image (or media). The images and media 
scale down as the parent element scales down. 

Using a simple font-size reset on the <body> 
element and defining font sizes in ems or percentages 
keeps our type fluid. 
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命 Mobile-first 考 

+ Responsive Web Design 


barling, I dont care if you are cold. 

If you knew how much optimization it 
had taken to look this good, you’d wear 
a bikini on the beach in winter, too. 


That’s a beautiful mobile site. But beauty is only skin deep. 

Under the covers, it’s a different thing entirely. It may look like a mobile site, but it’s 
still a desktop site in mobile clothing. If we want this site to be greased lightning on 
mobile, we need to start with mobile first. We’ll begin by dissecting the current site 
to find the desktop bones hiding in its mobile closet. Well clean house and start 
fresh with progressive enhancement, building from the basic content all the way 
to a desktop view. When we’re done, you’ll have a page that is optimized regardless 
of the screen size. 


this is a new chapter 





not-so-splendid walrus 


Just when you thought it was time to celebrate 


Mike called in a panic. As a reformed web developer, he normally 
resists the urge to tinker with his site, but he fell off the wagon 
and decided to make a few tweaks. He thinks he broke the 
Splendid Walrus site and needs help. 

Mike added pictures for all of his new brews to the On Tap Now 
page. He didn’t modify the code other than to add pictures, but 
now the page is loading very slowly on mobile phones. It’s so slow 
that customers have started complaining. 


Sorry, guys. Not sure 
what I did, but the 
Splendid Walrus site is 
now dog slow. 


O 





out 0, Ta P No. W at 吨 : //‘_—/ 似 /_W27 。 山 
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responsible responsiveness 


Is there really a problem? How do we kwow? 


Jim: Poor Mike. He knows just enough to get in trouble. 

Frank: Exactly. But in this case, I’m not so sure he did 
anything wrong. Mobile phones have slower networks and 
processors. Of course the page loads slowly. 

Jim: That makes sense, but it still seems slower than 
expected. Mike says that even on a WiFi network, it is 
unbearable. And he has a brand-new smartphone. 

Joe: Hmm.. .it sounds like we should at least look into it to 
see if there is something obvious slowing it down. 

Frank: How will we know what’s going on? It could just 
be the network or any number of things between the 
phone and the server. 

Joe: I’ve been using a plug-in for Firefox that gives you a 
grade on your page performance. We could use something 
like that. 


Ji 】 


That sounds awesome. 


Frank: Gan we install plug-ins on mobile browsers? 

Joe: Ugh, you’re right. There’s no way to install plug-ins 
on my phone. Some of my favorite developer tools are 
browser plug-ins. Without them, how do we know what’s 
really going on? 

Jim: The other day, Kim was showing me how you can 
watch every request that is made on our WiFi network 
through the network router’s log page. Gould we look at 
something like that and watch what the phone does? 

Frank: That’s a great idea. But instead, let’s use di proxy 
server. It is very similar to what Kim showed you, but it is 
designed for exactly this purpose. If we hook up the phone 
to a proxy server, we can see all of the web requests that 
the phone makes. 



The p|uq—j h 

外。。外 U p 上^。 W 义佌， L : 

Spcakmj of y/WicK v/cVc 50^5 io a 
\\ii\t time lookmj at t 

y/ov-v-v. IAfe'11 mob'ilc-^fivs-t Responsive 

l/Veb soon, a^d v/c promise all J ^is 

PCV"*foV"w>3\r\dC S'tu-P-P IS V*cl3"tcd- 
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wait, use a proxy 


Waitress, will you take my order please? 



A famous athlete is stricken with food poisoning the night before 
a big match against his archrival. The police suspect foul play 
and have assigned a detective. The detective quickly starts 
questioning the best witness: the waitress. 

The waitress took the food order, wrote down the request, 
and handed it to the cook. After the food was ready, the 
waitress brought the food out. The waitress saw everything. 

Most of the time when you’re on the Web, you’re talking 
directly to the cook. Nothing is between you and the web server 
for the page you’re visiting. 

But if we have a proxy server act like a waitress, it will record 
both what was ordered and delivered by the browser. Now we can 
be our own detectives and dig into what actually happened. 



a 




Mobile phone 



Proxy server 


The Internet 


ia dcm’t d 心 server. 

uV" ^>CV"Soy\al C-omfutcv* tbx\ 

att as a s 伙 v 饮 

so^twav-c. 


Can I get a proxy to set up my proxy? 

If you do a lot of mobile work, you may find it worth your 
while to learn how to set up a proxy server. It is the best way 
to see what’s going on between the phone and server. 

Unfortunately, setting up a proxy server can be a tad difficult. 
Thankfully, some kind souls at Blaze, a mobile performance 
company, have set up a free service that is the next best thing 
to installing your own tool. 



Web server 
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responsible responsiveness 


What to do whew things aren't blazing fast 


Blaze provides Mobitest — a free mobile performance test 
using real iPhone and Android phones. Mobitest is located 
at www. blaze, io / mobile. 

Blaze’s Mobitest works like a proxy server. You tell it what 
web page URL you want to test and what device you 
want to test with. Mobitest then puts your test request in 
a queue for that device. 

When the phone you requested is available, Blaze tracks 
all of the communication between its test phone and the 
web server so you can see what happened. 

There is even a fun feature that records a video of the 
page loading so you can see what someone using that 
phone would see. 



禮 T D 喊 


Ready for some detective work? It’s time to figure out why the On Tap Now page is slow. 


o Test the On Tap Now page at www.blaze.io/mobile. 

The On Tap Now page is at http://hf-mw.com/ch2 / chapter2 / ontap.html. 

Look at the load time and page size. 

The load time tells you how long the page took to load on this phone 
during this test. The page size is the total size of all resources associated 
with the page including HTML, CSS, JavaScript, images, fonts, etc. 

o Try two different phones and compare speeds. 

Not only will the speed of networks vary, but the phones themselves may 
also vary in the speed at which they process and display pages. 
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overweight walrus page 


Pow't let its looks fool you, thafs a Pit page 

Yikes! The test says the page is approximately 3 megabytes in size. 

That would be a pretty big page for a desktop browser. It’s a slow- 
moving elephant on a mobile phone. 

No wonder Mike’s customers complained about the page. It takes 
over 10 seconds to load on a test iPhone. 


i-t s -too big -fov desk-top 
■too. Jus-t bc^usc a sOcch is big 

goeyt mcah -the 乙 ohhWioh is -fast 

ma-ttev-s cvcvywhcvc. 


广 _ /Wobi-tcs-t vcsul-ts 

^ using iPhone 


P a 9 c 


LOAD TIME 


PAGES J 1C 


WAT ERF ALL CHART 


Load 

yvc*t>wovk 

6 。矜 怕 . 

Blaz^c "tests 


Si^o^ HTML 

dy\d dll \rcsouvtcs 
-fov fay 


12.045 


3027.52kb 


OY\ 





Cli^k "fco 
see a lav-acv- 
vcv-sioh ot 
the watc\r-fclll 

乙 ha\rt. 


SCfiCCNSHOT 


Os Tap \t 'E'iei-: 

Sn.t.M ： 93[!i Waiwn 


Vimt Us! 




t5p|EJ<SlV ri¥lrfrilKr 
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What is a waterfall chart? I looked at 
it, and it doesn’t tell me what^s making the 
page so big. Is the chart even useful? 


Waterfall charts are a common 
web performance report. 

The chart shows the files that the browser 
requested from the server to build the web 
page. The bars represent the length of time 
spent downloading a resource. The resources 
are listed in the order in which the browser 
requested them from the server. 

But don’t go chasing the waterfall on the Blaze 
report page. It doesn’t have the details we need 
for our detective work. We’re going to show you 
how to find a waterfall that is more useful. 
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responsible responsiveness 


There's gold iw J m HAR hills 

There is a nugget buried in the Blaze Mobitest 
results page behind the tiny View HAR file link. 

Click that link, and you will go to a new site 
called the HTTP Archive Viewer and see a more 
detailed waterfall than the test results page. 

This waterfall chart shows us every resource that 
the browser downloaded in much more detail 
than the picture of the waterfall on the Blaze 
report page. 






Performance Result Averages for iPhone in Canada, Ottawa 


On Tap Now at Thf. 
Sn>„M»n» Waiju-s 

Visit Us! 


ERAGE LOAD 


12.04s 


ERAGE PAGES 


3027.52kb 



Your website is faster than 20% of tested websites 

Want to learn more about how The Mobitest Performance Tool 
works and the Percentile is calculated? Visit our Methodology 
page 



o 


Tk tab do^-ta'ms a 
▲以 Uhart “如巧 

tested. It ^as 

W a 獄以 c . 


^ebook W， ^ ^ 

ttTTP /W 匕 hive l/icwcv- 

/ 
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</> 




HTTP Archive Viewer 2.0.14 




Ihttp://www.softwareishard.com/har/viewer/7in C Or Google 


Home Preview HAR 

Show Page Timeline | Show Statistics | Clear 

E page_0 

ffi GET ontap.html 
i±l GET ch2stepl.cs 
ffl CET maps?f=q& 
i±i GET bensons_bi 
ffl CET chapmanjc 
ffl GET crystal_spri 
(£ CET hoytjpg 
王 I GET milLends.ji ： 
ffi CET milo_mcivei 
>±J CET mount_tabc 
!±l GET omsi.jpg 
田 CET oxbow.jpg 
i+l CET pittock.jpg 


About 


2.0.14 


Schema 


® GET sandy_river 
i±i GET sauviejslar 
田 GET try on 一 creek 
王 I CET poweredby. 
(±) GET the_grotlo.j 
+ GET wells_fargo 
® GET taps.jpg 
田 GET transparent 
田 GET gen 一 204?iir 
® GET home3.html 
® GET smc.png 
® CET {main,mod_ 
+ GET pt?lyrs = mg 


C 1.2 Kl 
C 1.1 Kl 
C 83.5 I 
C 207.3 
C 155.7 
C 160.6 
C 177.1 
C 159.8 
C 175.5 
C 166.2 
C 189.2 
C 169.9 
C 187.9 
C 192.9 
C 210 K 
C 169.8 
C 256.1 
C 3.5 Kl 
C 206.1 
C 156.1 
C 440.7 
C 95 B 

20 朴 0 

200 C 363 B 
200 C 389 B 
200 C 175.4 
200 C 860 B 


2( 



88ns 



Do you see any suspicious files being 
downloaded in the waterfall chart? 


ue m ^ 

HAR stands lor 
HTTP ^rckive. It 

is a lile speciiication 
tkat provides a 
stanctard way to 
record wkat kappens 
wlten a browser 
requests a wet page 
from a server. 
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bloated page pie charts 


10,000-feet view: Show statistics 


The HAR waterfall charts show you the files that were downloaded, 
how the server responded, and the time it took to download. But 
before we dig into the waterfall chart itself, let’s take a look at the 
high-level statistics. 

Click the Show Statistics link on the HAR Viewer page to see a series 
of four pie charts. The chart that matters most to us is the second one, 
which breaks down the page by type of file. Hover your mouse over 
each file type to see its total file size. 



Sec the pic (ihav-ts by 
fl’ 也 S-b-tis-ti^s 

"the WAR 


oh 



Blocked 

DNS 

5SL/TLS 

Connect 

Send 

Wait 

Receive 



Woa! Thcvc ave 衫 ,wa 5 cs, 

*f ov， 


HTML/Text 

JavaScript 

CSS 

Image 

Flash 

Others 



Headers Sent 
Bodies Sent 
Headers Received 
Bodies Received 



ft ■ Down loaded 
Partial 
From Cache 



HTML/Text 
JavaScripl 
CSS 
Image 
Flash 
Others 


Eight -files -fov* 

this page. Totcil siic of all 
JS is l^l 



So that's why the page is so slow. There's 
nothing on this page that uses JavaScript, but 
ifs downloading eight JavaScript files. Plus the 
images are almost 2.4 MB in size. We need to figure 
out why the images and JavaScript are so big. 
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Find the drags on page speed 


Now it’s time to dig into that waterfall chart to find where 
the big images and JavaScript are coming from. Here’s a 
key to reading the chart. 


T\\t y/eb pay vc<\ucs*tcd. 
ttovcv- ovcv i*t ov a full-* 
dovm you 

乙扣 add rwovc m-fo\rmatior\ 

{jo diiavt (e 士 如 
•type o-f -file)- 


lihe shows a di-ffcv-Cht -Pile 
^c<\ucstcd -to build the pay. 
ttovc\r -to SCC -the -Pull URL. 


l/icwcv pa^e 


oh 


the _ 


S'izjC a( the 
-pile dov/nlosdcd 


hit pi/ / hf-m wxom fch7/ t chaptc r2/o map.him I 
+ ^CE1 or tap. ht mil 


J hc ¥ J ^ucsi 

*»^Ohr> "the bvowsc^*. 
^ually but ^ 
be POST \i\ a ^ 


OV-m. 


+ CE1 lops.css 

+ GET maps?f=t|&soijrte-s_q^ 
+ GET bcnsons_bubbler.jpg 
+ CET clia|3tTMri 」 owns(ljdcJ|Kji 
+ CE1 crystal 一 springs .jpg 



Time V-C^uircd *to 
download the -file 


I.9Ss 

192ms 


1,36s 
138s 
1.39s 
1.4 s 


Clidk the plus s\y\ *to yt w>o\rc details 
abou^b v/hat the bv-ov/sev asked the 
scv-vcv- a^d hov/ the scv-vcv \rcspo^dcd 
(aka the HTTP iicadcvs). 


TKc HTTP rtsyo^st 

to&t *(Vo 眯七 he scv^vcv - . 

2.00 ^ed^s 饮 w 


卞 bar gv-aph shows wkh -the -file request 

stav-ted ahd whch -the -file ^ompleiely 
dowhloadcd. Ohly a ^ cw -files be ； 
dowhloadcd at the saw 


The amount of communication between the browser and the 
server can be overwhelming, but don’t worry. You just need to 
look for two things: which resources are the largest, and where is the 
JavaScript coming from? 



Review the waterfall chart for the On Tap Now page. Find the five largest files and examine 
them. For each file, answer: 

o What type of file is it? 

❺ What domain is the file coming from? 

❺ If the file is an image, what is its height and width? 

Hint: You may need to copy the image URL and open it in a new tab or 
download the image to find the dimensions. 


What does this information tell you about what you might need to do to make the page faster? 
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exercise solution 








純 Z pixels wide 


pixels y/ide 
Staled s»z^ 

used OVN lP^OV\C 

Same (ile OZI ⑶） use( J 
fov* both despite the 
di-P-PcirCh-t sizj^s at whidh 
the iwr»ajc appears 

^ Images are v\o{, *to stale- 


o If the file is an image, what 
is its height and width? 

Find the images with the largest file 
size. Copy the URL and open them 
in a new window. Without even 
looking at the height and width, you 
can tell that these images are far 
larger than the size they appear on 
a small screen. 




ISe 

OH 


Did you find the problems with the page? Let’s review. 

o 


❺ 


TV^c lavy ^ IS “ C 

i\,t 0^7 sus\>*»6ous He 
V,cvc. These Wes 


What type of file is it? 

You can determine the type of file by 
hovering over the filename to see the 
full URL and extension. You can also 
add a column containing the file type 
so you can scan the list quickly. 


- http::/ /hf-mwxom/di2 (chapto r2 / o n lap .lit m I 
+ GET ontap.html 
+ GET taps.css 

+ GET maps?f-qasoijrce= ； s_q^ 2(；'；' 

+ GET bensons_bu.bbler.jipg 
+ GET c hap man _l owns dale J pg 
+ GET crystal_springs jpg 



What domain is the file coming from? 

Now we’re getting somewhere. Check out where 
this big, 174.8 KB JavaScript file comes from. 


Wovc^r ovc^r the page URL. 
Clidk oh "the doy/h a^^ow 
the URL io add 

the 士 ile type e,ol 


lumh. 


+ GET iVBORwOKGgoA/ 

+ GET {main,mDd_util,iT 200 
田 CET iVB.ORwOKGgoA/ 

个 

fiovev* youv- mouse ovcv the -file 
-to see the -full URL. 


t€Xt/jav 174.SK 


壯 H 今 KB, 七 ^ k *tV^ laqes 七 
JavaS6n ? t (Wc ov. -t^c 


iM 

3ZSms 

.1 

475ms 


1 

ISZms 


+ CET iVEORwOKGgoA/ ? ( 32Sm& 

田 http ： / 1 mans.gslaticcom i cat js/mtl/en ALL/mapf 1165/375b/mapsZ/{main.mQd util.imod act. 

田 CET iVEORwOKGgoA/ ? ISZms 

Maps.gstatic.com is a domain for Google Maps. The browser is 
downloading JavaScript for a map that isn’t displayed on the mobile view. 

Many of the mysterious files are related to Google Maps. 



冬工 si?*d-2i 



拿 splo^ 


—I 
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Where did that froogle Maps JavaScript come from? 


When you view the On Tap Now page on a mobile 
phone, the page doesn’t contain a map. Why is that 
JavaScript downloaded? Let’s open the page in our 
desktop browser and investigate. 

Hey, there’s the map. Mike must have set it up so 
that it only shows up on wider screens. 

Hiding the map on the mobile makes some sense. 
It’s a bit big for a small screen. Older phones may 
not be able to handle the map’s complex JavaScript, 
and we’ve seen that the map has a lot of overhead. 

So how did Mike hide the map? 

Om \m to download them all 

The map is included in the page via an if rame. 
The if rame loads all of the components necessary 



Uc^rc 


clus 


ive 


^p/ 


On Tap Now at T he Splendid Walrus 

On tap this MOiVm ： 


Visit Us! 

(.oration 

S\V IVrfriul Strcrl 
Portland. OR 97201 

Hours 

Ml 

Until midnight 
Sa-So 

Until 1AM* 

•Athtu 

CJI u, 

♦ 1(503) 5S5-1212 


to make the map. 



广 Look ms'ide oyvtaf h 七 ml *to 
-f md *this dodc- 


ciframe id=”map n width= n 300” height="300" frameborder="0 M scrolling= M no" 
marginheight="O n marginwidth= M 0" src= M http :/ /maps.google.com..."></iframe> 


This smjlc i-P\ramc Quses 午 7 -Piles -to be downloaded/ 


£%*tvcrwdy URL abbvcvi3*tcd 


Mike hid the map with CSS 


Mike figured out how we used media queries to 
modify the layout for mobile. He added in his own 
CSS rule inside our media query. The rule Mike 
added sets the display for the if rame to none. 

Unfortunately, while setting the display to none 
will prevent the map from showing up, it doesn’t 
prevent it from downloading. 



^. TV^c af w0 代 

• m tV>c CSS We. 

{display:none;} 


yules 


has ^ id r ， a P . This Uc hides 

thc ^°°9 lc ^ i-Pv-amc by scUma the 
display -to hohe. 
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optimize those images 


Whafs with the big pictures? 

The images on this page need to be put on a diet. Let’s look at the waterfall 
to find the biggest images and see why they’re so big. 


+ CET powcrcdby^ptig ■■: 3,5 KB 

+ CUT lhc_grotlo.jpg 206. H 

+ CCI wells_farg&jpg ：■ OK 1E6.1 I- 
El GET taps Jpg 200 OK 440,7 F 

+ GET Eransparent.priic ^ 95 B 


I 670ms 
SB Oms 
875 im 



1 = 245 


52 ms 


TV 塒 ㈤ •“ w . ⑽ X 七 

iav<\cst < 


be lavyj 





But that huge file is 
the header image, and it isn’t 
even displayed on mobile. 


Right, but that doesn’t mean it’s not downloading. 

The taps.jpg image has been hidden from the page in the same way 
as Google Maps — the display property has been set to none in 
the CSS. But, as we saw with the map, setting display : none 
doesn’t stop the content from downloading. 



@media screen and (max-width : 480px) 
[Other CSS rules are here] 

.header {display:none;} 


TW«s »s -tapsj^. *tV>i 

0 y\ Ta\> Hoy/ ysy m a 

dcsk*bo\> kv-ov/sev- *to see 
y/\icvc *tKc »w»a^c is used. 


Fluid images arc huge images 


Another thing to notice from the waterfall is that the brew 
labels are all large files that range from 93 to 132 KB. < 
They’re desktop images scaled down to fit the screen 
using the fluid-image technique we learned in Chapter 1. 

So this isn’t a new issue, but when we only had one or 
two images on the page, it wasn’t noticeable. But when 
you put 16 brew labels on one page, suddenly the fluid 
images are an anchor slowing the page down. 


' ^ of the 
{ birew labels is heav-lv 
2* /WB. Fihdihg a wav 

•^ 9 cs is key ^ 
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It looks mobile friewdly, but it isw't 

Jim: Well, that’s a bummer. I guess looks can be deceiving, eh? 

Frank: At least we can tell Mike he didn’t break the page. 

Joe: Yeah, any of us could have made the same mistake. The 
problems are really bad on this particular page, but I think the 
same issues exist on every page on the site. 

Frank: So what do we do? Build a whole separate site for the 
mobile version? Ditch Responsive Web Design? 

Joe: Let’s not get ahead of ourselves here. There’s got to be a 
way to make it work. We’re so close right now. Do the image 
and JavaScript problems have anything in common? 

Jim: It seems like all of the problems stem from the fact that 
we’re starting with desktop-appropriate content — images, maps, 
etc. — and then hiding that content. 

Frank: Exactly. We’ve got big files going to the browser by 
default and then CSS is being used to try to cover them up. 

But it seems that, if we’re not careful, the large files will still be 
downloaded by mobile devices. That’s not the ideal fallback 
behavior if something goes wrong. 

Joe: What if we flipped things around and sent the smallest 
files by default? 

Jim: Oh, interesting. That might work. Start with the mobile 
templates first and then add on content for desktop. 

Frank: What you’re describing sounds a lot like progressive 
enhancement. 

Joe: You’re right. We’ve been using progressive enhancement 
for years. The only difference now is that we’re starting from 
mobile and progressively enhancing the document to fit the 
desktop. 

Jim: It seems like it should work. Let’s try it out. 



Progressive enkancement 
promotes tuildingf layered 
wel> pages. At minimum^ 
everyone can see and use 
tke content. Tkose witk 
more capable browsers get 
additional layers ol style 
and interactivity tkat 
enkance tke experience. 
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mobile first; it’s only polite 


Mobile-first Responsive Web design 

Mobile-first Responsive Web Design (RWD) is exactly 
what the name suggests: RWD techniques that start from a 
mobile template. Despite its simplicity, there is a lot of power 
that comes from this a 


pp roach. 


Very small screens 
(feature phones) 



► Basic HTML 

► Simple layout 

► Small images 

► Limited CSS and JS 


Small screens 
(smartphones) 


Medium screens 
(tablets) 



► Add newer HTML5 features if supported 

► Simple layout 

► Small images, but bigger than feature- 
phone size 

► More CSS and JS 


► Because there is more room, 
we can add optional content 
like sidebars 

► Multiple column layouts 

► Larger images 


arger screens 
sktops and TVs) 




[ - i 

, —— .^ 

: as 


Oi 




► Add widescreen layouts 

► Larger images 

► For TVs, optimize 
navigation for use by 
people sitting 10 feet 
away who are using a 
remote control 



s0Jn-M (o£ -Mu0llopu co Qzls U00JOS uo pQs a5 q-Mu0lu0ou cc llu00>lssCDJo)OJQ. 

/oilis!S- 
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What is progressive cwhawcemcwt? 


Progressive enhancement views web design in a series of 
layers. The first layer is the content. Combine that with semantic 
markup to create structured content. If you stop right there, you 
have a document that nearly every browser in the world can read. 

After you’ve got the basics out of the way, you add a presentation 
layer using CSS and a behavior layer using JavaScript. You never 
assume the browser supports those features, but if it does, visitors 
get a better experience. 

For many years, web developers commonly built things that only 
worked on the most advanced browsers and tried to make sure 
the web page degraded gracefully on older browsers. Progressive 
enhancement flips this practice around. 


Behavior (JavaScript) 



Presentation (0SS) 



layc\r take. Cake- 


benefits of mobile - first design 

Mobile-first RWD isn’t that different from progressive 
enhancement. Recognizing this fact, many call it content-first 
design instead because content is the first layer of progressive 
enhancement. 

Regardless of what you call it, starting from the most basic 
document not only reaches the most people, it also has 
beneficial side effects. 

Mobile first is like a small-plate diet. Simply by eating on a 
smaller plate, you’re likely to eat less food. 

The desktop home page is an all-you-can-eat buffet. All sorts of 
junk gets thrown on it. 

Mobile is a small plate. You have to choose carefully and 
prioritize your content. 

And once you’ve got a focused mobile site, you’re better prepared 
to ask the tough questions like whether or not the things that 
didn’t make the cut for mobile are really important enough to 
add back in for desktop. 


- Semantic 

Up Ckse 

Semantic markup means HTML 
tags and attributes that convey the 
meaning of the content. 

For example, content surrounded by an 
<hl> tag is more important on the page 
than content marked up with an <h2> 
or a <p> tag. 



class and id attributes can also add 
semantic meaning to documents if their 
values are things like calendar and 
not presentation values like left or 
top. Many web developers use classes 
in a standard way called microformats to 
provide more semantic meaning. Learn 
more at www. microformats, org. 

Semantic markup doesn’t mean you 
completely avoid tags like <div> and 
<span> that don’t add meaning. Instead, 
you choose the right semantic tags and 
attributes for the content of a page 
whenever possible. 
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current page structure check 


Lefs turn this web page around 


Because we’re already using RWD, making our page mobile first won’t 
take too long. Here is a short list of changes we’re going to make. 


Make the HTML as simple as possible and swap the order of the CSS 
so that the mobile version is first. 


^ H why ^ ^ bji 


Fix CSS background images so that only one file gets downloaded per 
image. Make sure display : none is being used appropriately. 


Supply different source files for <img> tags at different screen 
resolutions. Make sure the right size image is downloaded. 

Use JavaScript to add Google Maps to the page when the browser can 
support it and the document is wide enough to accommodate it. 


The current structure of the Ow Tap Now page 

Open up the ontap.html file for the Splendid Walrus site in the chapter? directory. 
The file looks very similar to the document we built in Chapter 1: 


Ihs-fccad o-P 3 <div> dolled 

rwaih, Alike has ^\rcatcd 3 hew 

匕 ol_h with the id Jc “Ohtap ” 

That <div> dohtaihs -the list 
beev-s. 


Tv/o C.oluwy\s 
ms*bc3d v_^ 


Because we did a good job of creating a template with semantic markup, 
the document is clean and simple already. It looks like our main task to 
make the content mobile first will be removing the Google map. 


<div class= M navigation">...</div> 

<div class= M header">...</div> 

<hl>...</hl> 

<div id= M visit" class= n column M >...</div> 
<div id= M ontap" class="column M >...</div> 
<div class= M footer">...</div> 


Because we’re going to need to reference the code later, let’s use HTML 
comments to prevent the iframe from being included in the page. 


^oo 5 lc Ma ? s Aaw W 

su\r\rou^d'm 5 \i 一一扣 d - 一 >• 


Pmd "the i-fvar^c ih 七 he 养 vis’rt <div>. 


C <! — 

<iframe id= n map" width= M 300" height= M 300" frameborder= M 0" scrolling="no n 
marginheight= M 0" marginwidth="0" src= M http :/ /maps.google.com..."></iframe> 

-> 
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Am I oh a new page or wot? 



The On Tap Now page looks 
so similar to the home page. 
How can visitors tell they're on a 
different page? 


Good catch. We have a problem 
with the order of the content. 

On the home page, it was fine if the first 
thing on the mobile view was the Visit Us 
information. But if the Visit Us content 
repeats on every page, visitors won’t be 
able to tell that the page has changed 
without scrolling down. 

We need to reorder the content so the On 
Tap Now info comes before the Visit Us 
content. 




this! 

w 


uo 


Copy everything in the 
<div> with the visit 
id and paste it below 

the ontap <div>. 



1543 SW Pretend Strei 
Portland, OR 97201 

Hours 

M-F 

Until midnight 
Sa-Su 

Until 1AM* 


Call us 

+ 1(503)555-1212 


<div class= M navigation">...</div> 

<div class= M header">...</div> 

<hl>...</hl> 

<div id= M ontap" class="column M >...</div> 
<div id= M visit" class= n column M >...</div> 
<div class= M footer">...</div> 





Is the Visit Us content essential on this page? Would it be better to move it 
to a separate page and link to it? Or maybe leave it out of the mobile page 
and add it using JavaScript if the page is rendered on a larger screen? 
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content floating around the page 


Fix the cowtcwt floats 

The change we made to the order of the content broke the 
layout in a desktop browser. The Visit Us section is at the 
bottom of the page. 

In Chapter 1, we mentioned how putting the right column 
before the main column was a trick to make it easier to 
handle floats for layouts. If you want a block to float next 
to something, you need to put it first in the source order. 

Don’t worry, though. There is a simple fix here. We’ve been 
floating the Visit Us content to the left of the On Tap Now 
content. Instead, we need to float the On Tap Now content 
to the right of the Visit Us content. 

Open taps.css and make the following two changes. 

Before 





After 



@media screen and (min-width : 481px) { 

.column { 

margin : 1Opx 1.04166667% 0 0; 



@media screen and (min-width : 481px) { 

.column { 

margin : lOpx 1.04166667% 0 0; 


#visit { 

width : 31.25%; f 
float : left; 


Oa 呼七 Wis... 



0 68.75% 0 0 


#points 


^points { 
width : 25% ; 
float : right; 


width : 25%; 
float : right; 

} 

細 ain { 


細 ain { 

margin : 1Opx 27. 0833333% 0 
26.0416667%; 


#ontap { 

margin 



Chdhjc this.. 


lOpx 0 0 32%; 


.-to *tW»s. 


margin : lOpx 27. 0833333% 0 
26.0416667%; 


#ontap { 

width : 67% ; 
float: right; 
margin : lOpx 000; 


mslcad o^ 
純刀弓％ yves us 

a Irtblc W155IC 
voom fov* 七 

C.oluwv\S. 
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Mobile-first media queries 


Now for a little housekeeping. In Chapter 1, we started with a desktop website 
and made it mobile. We’re going to turn this around and start from the simplest 
content and build up to the desktop (and beyond). 

But first we have a confession. Mobile first is a little bit of a misnomer when it 
comes to the CSS. Before we apply any media queries for small screens, we’re 
going to set all of the basic styles — for color, type, etc. — and then enhance them. 

There is a good reason for doing this. Many mobile browsers don’t understand 
media queries at all. So we need to make sure they at least get the basic 
style rules. 

Put your CSS house w order 

CSS files are often like the kitchen junk drawer. It may start out organized and 
logical, but over time chaos takes over. To put mobile-first media queries in 
place, you may need to untangle the basic style rules from the layout rules. 

Fortunately, the CSS we built in Chapter 1 is already in good shape. Most of the 
basic style rules are already at the beginning of the file, with the media queries 
adding the layout and formatting later in the document. All we need to do is put 
the mobile media query before the desktop query. 


Basic 



/* Wider viewports/higher resolutions (e.g. desktop) */ 
@media screen and (min-width : 481px) { 

[Desktop layout rules here] 



CSS -follows i\\t 

七 Vi •('VOW' stvccv^ 

lav^c screen. 






* Mobile/lower-resolution devices */ 
@media screen and (max-width : 480px) { 

[Mobile layout rules here] 


Move mobile media r 吖 7 

above desk-top ^7* 

ouv moWc - Ws 七 
^v-o^v-css'ivc a^v-o36 


一 ~ 


this! 



Tesr Drii/q 


We’ve made quite a few changes to the page: • Removed Google Maps • Fixed the floats 

• Reordered the markup • Reordered the media queries 

We better check to make sure things still work. Load the page in a few desktop and mobile browsers 
to see how it looks. Be sure to check Internet Explorer. 
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conditional comment lifelines 


Surprise! The page is broken m Internet Explorer 



Don’t tell us you didn’t see this coming the moment 
we hinted you might want to test the page in Internet 
Explorer (IE). Battling IE is a rite of passage for web 
developers. You’ve probably been scarred enough from 
previous battles that you knew there was an IE-sized 
monkey wrench awaiting us. 

So what’s the catch? IE doesn’t support media queries. 


Now before you toss the book aside and curse us for 
teaching something that doesn’t work in the world’s most 
popular browser, take a deep breath and relax. There 
are ways to work around IE’s (many) shortcomings. 



WcVc a little "boo hav-sh. above 

do support media <\ucv-ics, so hclf is dom'mj. 


Bc^usc IB e ahd below doh'-t support 


Internet Explorer's escape hatch: conditional comments 

Microsoft has provided a nice tool to help web developers target code 
specifically to Internet Explorer via conditional comments. 


ill . r WoY/SCV- IS less 0*t) It °\ ^ 


See the -Pull syhtoix 4v- ^Ohdiiiohal 

ai hUp：//bit ly/ic-^ommch-ts. 


- IS 


Look tav-c-fully- 
HTML 。。啪啪亡 灼七 
opc^s ov\ 七 he >v*s*t 
Ime, Wt docs^*t 
tlosc 

mtludcd ov\ … al 

Ime. Woy/scvs 

will see -t^is as a 

i^ovc 

•rU £>o 灼七⑶七 . 



<!--[if (It IE 9)&(!IEMobile)]> 

〈link rel= n stylesheet n type 二， ’text/css n href= n layout.css" media= n all n /> 
<![endif]——> 




l*f the do^diiiohs a\rc IE v/ill do y/haicvc\r is \y\ bciv/ccy> the opehmg [i*f] 
statcrwcht ay>d ihc tlos'mj Cchdi-fJ. The example shows a Imk -to a CSS -file, 
bu 七 _七 ^ould be you v/ould (\t\d m ar> HT/^L dodur^Cht 
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responsible responsiveness 


Use coHditional comments with a media query 

You probably noticed that the conditional comment points to layout.css. 

Time to create that file. 

We’re going to grab some of the rules from the current stylesheet. We’ve 
called the new file layout.css because it will only be used for browsers that 
have enough screen real estate that multicolumn layouts make sense. 


o Create a blank text file called layout.css and copy the 
desktop rules into it. 

Make sure you copy everything between the beginning and end of the 
media query, but not the @media rule itself. 


taps.css 

/* Wider viewports/higher resolutions 
(e.g. desktop) */ 

@media screen and (min-width : 481px) { 

.column { 

margin : lOpx 1.04166667% 0 0; 

#visit { 

margin : 0 68.75% 0 0; 

width : 25%; 
float : right; 

} 

細 ain { 

margin : lOpx 27. 0833333% 0 
26.0416667%; 

} 

#ontap { 

width : 67%; 
float : right; 
margin : lOpx 000; 

} 


you dopy -them, remove \rulcs and the 
suV^oundn^ media Wfe II 

v-cafply the rules *to HTML 灼 wt. 

layoutcss 


Copy these 
\rulcs -to ^ 


youv 

-Pile- 


y\t>N 
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conditional love 


❺ Add a link to the new stylesheet. 

For browsers that support media queries, we’re going to add a link 
to the new lay out. css file if the screen size is wide enough. 



<link rel= M stylesheet" type= M text/css" href= M taps.css" / > 

<link rel= M stylesheet" type= M text/css" href= M layout.css" media= M all and 
(min-width : 481px)" / > 


Add *tW»s Imk -ba^ 




The 午分 /px vdluc -po\r rwih—wid"tli 
Copied -fv-om the media <^ucvy we 
\rcrwovcd -Plrorh taps.^ss. 


was 



TKis is media <\ucvy syntax. 
(or Imk -ta^s 払 at you learned 
•m Chartev I. 


❺ Add the IE conditional comment. 

We’ve got it working for most desktop browsers. Now we just need 
to add the conditional comment we created earlier to finish up. 



<link rel=" 

stylesheet" 

type= 

"text/css" 

href= 

"taps.css" /> 



<link rel=" 
(min-width : 

stylesheet" 
481px)"> 

type= 

"text/css" 

href= 

"layout.css" media= 

"all 

and 

<!--[if (It 

IE 9)&(! 工 EMobile)]> 





<link rel=" 

stylesheet" 

type= 

"text/css" 

href= 

"layout.css" media= 

"all' 

'/> 


<![endif]--> 



The do^drkio^l the Imc above i*t> 

e^suv-'m^ that desktop IE sees ouv- layoui ^ss -Pile. 


Time to test again. 

Check the page in a browser that supports media queries and 
different versions of Internet Explorer. Looks good, huh? 


ouv \>cv-s^ 6 kc*b 7 old 
W\t^A It sV^oY/'m^ tV^C 
layout __ _ 



HU 


Hoar* 

M-P 

Uotlaadntfht 


(50j)$5s. l2l3 


1 ap Now at The Splendid 

眺 nun^so D _ lTES 

憑 |i 


，.一 
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tJiereiare no ^ 

Dumb Questi9ns 


With super-fast 4G phones on the 
horizon, is performance really that big of 
a deal? 

Absolutely. Even 4G phones end up on 
the EDGE network occasionally (EDGE is 
an older, slower network). Studies show that 
slow sites decrease usage and directly affect 
the bottom line. 

Why am I getting different results 
from the Blaze Mobitest? 

There are many reasons why this 
can occur. Page download time will change 
with every test depending on network traffic. 
Google Maps code is different for each 
operating system and may change over time. 
The behavior of the phones will also change 
as new versions of the operating systems 
are released. For the book, we tested using 
Blaze’s iOS 4.3, Android 2.2, and Android 
2.3 test devices. 

Don’t worry too much about the variations 
in test results. What matters is the code and 
images being downloaded unnecessarily. 

By separating the stylesheet into 
two files, aren’t you making the site load 
more slowly? 

It is true that the number of HTTP 
requests makes a big difference in the 
download speed. So we shouldn’t recklessly 
add requests. In this case, we thought it 
made more sense to separate them so IE 
could use the same file. 


You mentioned that setting up a 
proxy server might make sense. What do 
you recommend? 

There are many proxy servers, 
including some fantastic open source ones. 
We happen to be fans of a commercial 
product called Charles Proxy. 

The lack of plug-ins seems like a 
big deal. How do you get anything done 
without Firebug and Web Inspector? 

It isn’t easy. First, a lot of your 
debugging work can be done in a desktop 
browser so long as you are careful to test on 
real devices at some point in the process. 

There are also a lot of new tools that attempt 
to get around the plug-in limitations. The 
Mobile Perf Bookmarklet (http://bit.ly/ 
mw-perf) includes many performance tools, 
weinre (http://bit.ly/mweinre) and Opera 
Dragonfly (http://opera.com/dragonfly) let 
you run Web Inspector on your desktop 
and examine what is going on in the phone 
browser. 

It doesn’t seem like much changed 
when we switched to mobile-first media 
queries. Why bother? 

For this page, there wasn’t a big 
difference between a desktop-first CSS file 
and a mobile-first one. In our experience, 
however, this is the exception. With more 
complex styles, you often want the wider 
rules to override some, but not all, of the 
styles set for smaller screens. Reordering 
the media queries ensures that the CSS 
cascading behavior is consistent with the 
goal of progressively enhancing the page as 
the screen gets wider. 


It seems like the order of content 
may often be different between desktop 
and mobile. How do you handle this in 
more complex pages? 

you caught that, huh? Yes, this 
is one of the common challenges for 
Responsive Web Design. In the long run, 
the Flexible Box Module (Flexbox) in CSS3 
promises an easy way to reorder content in 
stylesheets. Combine Flexbox with media 
queries, and you can completely reorder 
pages as needed. Unfortunately, Flexbox 
is still young and isn’t fully supported. So 
developers resort to JavaScript to reorder 
content or combine RWD with device 
detection (see Chapter 5). Frankly, content 
ordering and image handling remain two of 
the biggest challenges for RWD. 

Will the versions of IE that don’t 
support media queries see the responsive 
design? Aren’t media queries necessary? 

Internet Explorer will display the 
desktop version. It will still have the fluid 
grids and flexible images. But it won’t 
change based on any of the media query 
instructions. If media query support is 
critical, there is an open source library 
called Respond.js that fills in support for 
media queries for older IE versions. This is 
a fairly intensive script, so be sure to test 
extensively if you decide to implement it. 
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fix displaymone with a media query 


How are wg doing? 

We’ve got the basics in place and our CSS in order. What’s next on our list? 



V Make the HTML as simple as possible and swap the order of the CSS 
so that the mobile version is first. 


Fix CSS background images so that only one file gets downloaded per 
image. Make sure display : none is being used appropriately. 


Supply different source files for <img> tags at different screen 
resolutions. Make sure the right size image is downloaded. 

Use JavaScript to add Google Maps to the page when the browser can 
support it and the document is wide enough to accommodate it. 


Play taps for the header image 

Our waterfall chart showed us that we had one large 
CSS background image that was being hidden with 
display : none. Despite the fact that the image never 
shows up on the page, the browser still downloads the image. 

So let’s make sure the image is only downloaded when it is 
needed. How do we do that? By putting it in a media query so it 
only gets downloaded if the screen is wider than 480 pixels. 

But instead of creating a whole new media query, put the CSS 
rules in layout.css, which is already being included in the page via 
a media query in the <link> tag. 


Pclctc these Imcs 
-p\rom "taps.dss 
you add 

•them *to Uyout^ss. 


Check the On Tap Now page using the Blaze Mobitest to make sure taps.jpg is 
no longer being downloaded. Try both iPhone and Android devices. You can 
use http:/ / hf-mw.com / ch2/ex/3/ontap.html if your copy of the page is not on a 
public server. 


Cofy these Imcs -Pvom 
■taps.dss add -them 
*to tY\d layoutdss. 



header { 

background : URL( 1 images/taps.jpg 1 ) repeat-x; 
height : 300px; 


Tqst DriVq 



5£織 
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W \ A ^ Wir^aae 

°ptimi^i 0h has J 

^ a y s bc ^ pa^ar^ouhi 

卜把 七忱 ^^^c^-tiohs a^c 

" cv f a 3 

dcstkof> <iompu-t C v-s. 


It works on iPhone, 
but the image is still 
downloading on Android. 


7cET sauvie_island.jpg 

ZOO OK, 

102.5 KB 

+ CET tryon_creek.jpg 

200 OK 

149.9 KE 

+ CET taps.jpg 

ZOD OK 

440.7 KB 


20 Requests 



2.1 MB 


f[Y\dro\d appears -to sfcH be 
dov/hloadmj taps.jfj. 


Blaze’s Mobitest says Android is still downloading the 
image, but it is a false report. 

Blaze had to modify its phones to make them work for remote testing. 
This causes some occasional odd behavior. 

When you use a stock Android phone, the taps jpg image will not be 
downloaded. 


&oi 叫 old school with image optimization 

Back in the early days of the Web, web developers spent a lot time worrying 
about image optimization. As bandwidth has increased, web developers 
stopped worrying about eking out every bit of performance from images. 
But mobile devices make image optimization paramount once again. 

It looks like we can make the taps.jpg image smaller with some basic web 
image optimization. Changing the JPEG quality from 80 to 45 makes the 
image 78 KB instead of 440 KB, 
and you have to look very closely to 
see any difference in image quality. 


> for W«b i 


L( 10 QX> 


A 


v 办 cc f 刈丁亂 . 


/^a 9 cs still r.oi sr^all 

www.srhushi-t.^orh. 

Copy the optimized 
version of taps.jpg from 
the extras folder into 
the images folder to 
replace the original, large 
file with a smaller version. 


mmm 

1 . 24 M 

刚 KB 

jm 邊 — 編 ■ ] 


: i 

*1 QiOMy 

4S J 

( ^ogrmtwr 

0 Occm*d M«n* 

C Co«0« Mrofll* 

『 Jij 

t 

M Convert io tACt 

UAfMror Color 




Sim 

•' i«f» p 





WcVc usm^ rhotoshof to oy 
fho*to -fov *thc Wleb, bu*t you 
youv -favov*i*tc v/cb cdi'to'r 


Photoshop *fco of 七 im’iZjC 七 iVis 

dd 灼 use 
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scale images to the device 


Owe sre to rule them all 


CSS images are just the beginning of our image woes. The <img> 
tag presents problems for every responsive design because there can 
only be one value for the sre attribute regardless of screen size. So 
how do we deliver the right size image? 


*tV\c 0y\ 




\\Yt tW»s or\t 


Despite the heed multiple vc^rsiohs o( this image dePehdiha oh ihe 
s,2 ^； WT/WL ohly allows oy\c value -fov- the SYC. 


<img src="brews images/bensons bubbler.jpg" alt="Benson's Bubbler M > 


It’s tempting to replace the value of the sre attribute using JavaScript. 
Unfortunately, most browsers look ahead at the HTML document and preload 
images before the JavaScript has been fully evaluated. This often means 
one size file downloads before the JavaScript changes the sre, resulting in 
duplicate downloads and causing the browser to reflow the page layout. 


CSS be used -to 
ovcv"\ndc vdluc o-P 


A responsive image server to the rescue 


If the browser can’t ask the server for the right image, the server will just have 
to figure it out for itself. That’s what Sencha.io Sre attempts to do. 


We can use Sencha.io Sre to deliver the best-sized image for every device. 


T hc irha 9 c 把 izj h3 

以饮 ly khowh as Ti^C 


Set -f iv-s-t pavt o-f svt *to Replace with youv- domain av\d 
/ svt sci^diia.io/• path io ihe irways. 

i 


-tKc slasK, add -tKc ^ull URL 
you y/a^*t -to Kavc 


<img src="http :// sre.sencha.io/http : //[DOMAIN]/[PATH]/brews_images/bensons 
bubbler.jpg" alt= M Benson * s Bubbler"> 




Sencha.io Sre 
only shrinks 
images. 

It doesn’t make 


them bigger. 

Enlarging images results in 
poor quality. It is better to find 
a higher-quality source image. 


Sc^dha io will v-csi« the image -to -fi-t ihc siz^ 
七 he device screen. Fov example, 4 扣 iPhone 
"the "the v/ill be tons 七 v-aihed "to i*ts 
sdvee^ si« o( VLO by 午 00 pi 乂 els. 







Update all of the brew label images in the 
ontap.html document to use Sencha.io Sre. 
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How Sewcha.io Src works 


Sencha.io Src works like magic. You request an image from an iPhone, it gives you 
an iPhone-sized image. Using a feature phone? No problem — Sencha.io Src will 
give you a tiny image. Sitting at your desktop? Here’s the full image. 


How does Sencha.io Src know what size image to deliver? It uses the browser’s user- 
agent string — an identifier that every browser provides — to look up the device in a 
big database. The database contains information about thousands of devices. One 
of the things these device databases track is the size of the screen. 

Once Sencha.io Src knows the screen size, it goes to work scaling the image to 
the maximum width of the device. It stores the image it created in a cache for 30 
minutes so subsequent requests for the image at that size will be even faster. 


No great solutions for <img> tags 


Using Sencha.io Src has drawbacks. It relies on device detection, which can 
occasionally get things wrong (as we will discuss in more detail in Chapter 5). It also 
requires you to route all your images through a third party. 


_ 七 、 a a— 

Well -take a dloscv look m the 

^ you heed s “ 

do yo J ；；^ 

: C 奸 咐 P 軸 y/ 


The reality is that there are currently no great solutions for how to handle different 
image sources for different screen sizes. But watch this space closely, because a lot 
of people are trying to find a better solution. 十 

One final tweak: optimized beer label images 

As with the taps.jpg image, we can reduce the file size of the beer label images by 
saving them at a slightly lower JPEG quality level. Don’t worry, we’ve optimized 
them for you. Find them in the extras/labels-optimized directory. 


d'-P+utul-t? Read ih -this 
seines oh \rcspohsivc i^^aes ： 
http://bitly/Vwd— s /. 


Copy the optimized images into the brew—images folder, replacing any existing image 
files. 


Tesr DriVq - 

We should have an efficient, fast, mobile-optimized web page now. Test it 
using www.blaze.io/mobile to see how we did. Select the option to have Blaze 
run three tests on the phone to get an average. Compare the total file size 
and download time of the new page to the original page. 

If your pages are not publicly accessible, you can test using 
http://hf-mw. com/ch2/ex/4/ontap.html. 


you are here ► 


69 





performance, optimized 


That’s a blaziwg-fast mobile web page 

Our diet plan worked! The On Tap Now page is 87% slimmer 
than it was before. iPhone download time has gone from 
almost 12 seconds to under 3 seconds. 

Before 
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After 



PAGES HE 


T\\t 0v^ Tap Nov/ pay’s fos 七 - 
op 七 vcsul*ts- bc*t*tcv~ 


2.56 s 


389.94kb 


WATERFALL CHART 


SCREENSHOT 




Os TAt X«nv ,\t Titik 

Sl F i.t.N[?9[!i H r AI.I4i H 
Os TAP TMLS 





Mike is going 


love 


to 


how fast the site 


is 


on 


mobile phone 


now 


a 
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Web performance optimization is a growing 
field with many more ways to make 
pages faster. What other performance 
improvements could we make to this page? 
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Dumb Qu©sti9ns 


Why do browsers download CSS images that are 
never used? 

The browser usually can’t know for certain that an image 
isn’t going to be used. It could be an image that shows up 
when some JavaScript or CSS activity triggers it. The browser 
downloads the images in advance so people don’t have to wait 
if an activity suddenly triggers an image to be displayed. 

OK, so why don’t they download images that are 
within media queries? 

Originally, browsers downloaded them as well. Browser 
makers have seen how developers are using media queries 
and are adjusting browser behavior accordingly. All of this 
is fairly new, which is why some browsers still download 
resources inside a media query that doesn’t apply. 

Is it safe to route our images through Sencha.io 
Src? It makes me nervous. 

Being cautious is reasonable. Any time you integrate a 
third-party service into a critical part of your site, you’re going 
to be impacted if that service goes down. 

Sencha has said it is committed to providing this service and 
that it will remain free. At the same time, you can be sure that if 
a tremendously large site started using it, Sencha would need 
to be compensated or it wouldn't be able to run the service. 

If you don’t like Sencha.io Src, you could build a similar service 
using the device detection tools we teach in Chapter 5. 

Are there alternatives to Sencha.io Src? Are there 
solutions to the <img> tag problem that are client side only? 

There are many different ways to handle <img> tags 
in responsive designs. A lot of work is currently underway to 
find a solution that doesn’t require device detection. There 
are compromises with every solution, including the one we’re 
using for this project. You can find an extensive review of the 
techniques at http://bit.ly/rwdimgs2. 


What about other media? Do video and audio suffer 
from the same problems? 

In a word: yes. The HTML5 video and audio formats are 
a little better because they allow you to define fallback versions 
of the media in different file formats. If your browser doesn’t 
support the first option provided, it will look at the second one. 

But while better, this approach does nothing to address 
network speed or resolution. Someone using a mobile phone 
on a wireless network probably doesn’t need an HD-quality 
movie. By contrast, Apple's QuickTime video offers a movie 
reference format that delivers movies based on Internet 
connection speed. 

Is it just me, or are there a lot of unknowns and 
problems related to Responsive Web Design? 

There are definitely challenges. As with any new 
technique, people are still trying to figure out what works and 
what doesn’t. RWD is bleeding edge. That’s why we’re covering 
a lot of techniques in this book. It’s likely you’ll need to combine 
techniques to deliver the best experience for your project. 

Despite the challenges, the promise of RWD inspires many 
people to strive to build more complete solutions. Things are 
moving quickly when it comes to RWD. 
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to zoom or not to zoom? 


Zoom, zoom, pow 




Remember that viewport <meta> tag from 
Chapter 1? Time to look at it more closely. 

The viewport <meta> tag tells the browser the 
intended dimensions and scaling (aka zoom level) for a 
page. It also contains controls that can prevent users from 
being able to change the size of the page. 


Zoom in oh the viewport <meta> tag 

You’ll find the viewport <meta> tag in the <head> of 
the ontap.html document. The syntax is pretty simple. 


TV,e wWt a 

n See all ok the 

WKa-t a-t // 

<^c*ta> -ta^ »s 七 Wis? ' / 



I^Vidth of -the viewport. Cav\ be srt ih 

pixels oy ^ be sei h> 

wnidh tells -the bvoww "to the 

viewpoint io ihc devi^ vcsolutioh. 


<meta name="viewport" content= n width=device-width f initial-scale=l, maximum-scale=1" / > 


Sets -the mi-tial sddle (o\r zx>om 
level) o( -the pajc- Srttmg i 七 "to I 
"the dofi.ui^c^'t should be 
displayed at its 灼 o\nr^l sdale- 




Pctlav-cs a ov\ 
iiov/ mutii pay 

be staled up. 
Tiicv-c is also a similar 
miir^ii^uw'—stslc 



Hie ruaximum—s^alc 

is what is Pvcvchtmg 
七 he usevs 
zoomihg -the page. 
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The right to zoom? 







fMs! 


It seems like being able to zoom 
is important for accessibility. Why 
would anyone ever turn it off? 


It can make a difference for accessibility. 
Some web developers have gone so far 
as to declare that zooming on mobile is a 
fundamental human right. 

We wouldn’t necessarily go that far, but zooming is important, 
and it should be considered carefully before it is disabled. 

As for why designers disable scaling, there are a few reasons. 

If the page is using complex touch gestures, disabling zoom 
makes it easier for people to swipe successfully. 

There is also a bug in iOS that causes 
the zoom level to change when the 
device is rotated into landscape 
mode. The bug zooms the page in, 
causing the right side of the page 
to get cut off. 


turn zooming back ov\ 

To turn zooming back on, we need to 
remove the maximum-scale setting 
from the viewport <meta> tag. 




^ y° u ah iOS dcvi^ a 

r? .^ S L CS ihc ^ ^ ^ lo, 9 e^ 

o-Pf 

the side of the 


Edi 七七 he vicy/pov-t ta》, 

remove ''ma^n^um-sdalc—l - 





<meta name="viewport" content= n width=device-width, initial-scale=l 


A-Ptcv- you "tu\rh z^omih0 oh ； 

^ iPhone ov- iPod Toudh io 
SCC the iOS zoomihg bug ih 


= 1 " /> 

4—J 


/l/Iakc 

dommd 


suVC yoi 

\ a-f-tev- 


u vemove *tV>c rx.*tva 

“mrtidl - sddle 二 I 
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map out the final step 


Pack to our regularly scheduled project 

With our emergency viewport adventure out of the way, let’s take a look at our 
progress. Our fast mobile page puts us very close to a mobile-first RWD. All that’s 
left to do is add the map back in if the screen is big enough. 



V Make the HTML as simple as possible and swap the order of the CSS 
so that the mobile version is first. 

"7 Fix CSS background images so that only one file gets downloaded per 
image. Make sure display : none is being used appropriately. 

\/ Supply different source files for <img> tags at different screen 
resolutions. Make sure the right size image is downloaded. 


Use JavaScript to add Google Maps to the page when the browser can 
support it and the document is wide enough to accommodate it. 


Add the map back using JavaScript 

The only remaining item is to add the map back if the browser window is 
wide enough. We’ve already seen that, if we hide and show the map using 
CSS, the resources for the map will still get downloaded. 

So we’re going to need to use JavaScript to add the map when appropriate. 
Think of it as a Java Script version of the media queries we know and love. 


Grab that Google Maps iframe code that we set aside earlier. We’re going 
to need to put that back into the page in order to show the map. Let’s take 
a closer look at the iframe code. 


七 




㈣ 以 ㉗ 


use 




<! 


<iframe id= n map" width= n 300" height= n 300" frameborder= n 0" scrolling= n no n 
marginheight= M 0" marginwidth= n 0" src= n http://maps.google.com. .."></iframe> 

一一 > 
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On second thought a map would be useful 


Location. Location. Location. 

The old saying takes on new meaning when it comes to mobile phones. 
Because many phones can tell where you are via GPS and other forms of 
triangulation, using location to provide more relevant content is common. 

Mike hid the map on mobile because it was too big. Now that we’ve seen 
how many files it downloads, it makes sense to keep the map hidden. 

But that doesn’t mean a map wouldn’t be nice. So instead of embedding 
a map on narrow screens, let’s link to the map. 


Add a link to the map 


To link to the map, we’ll need a <div> that our JavaScript can reference. 
The <div> will contain a <p> tag with a link to the map. Why do you 
think we need to order it that wav? 







Move </ p > 


<a href="http://g.co/maps/jm2pw n >View Google Map</a> 




-tWlS SOOW 


</div> 


Add the hew 

<div> above -the 
乙 ommehted — out 

Code 



<! — 

<iframe id= f, map f, width= n 300 n height= n 300 n frameborder= n 0 
scrolling= n no n marginheight= M 0 n marginwidth= n 0 n 
src= n http : / /maps . google . com. . •’▼></if rame> 

一一 > 


hew 
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it’s kinda like a media query 


Puild a pseudo-media query iw JavaScript 

Let’s take a look at the JavaScript code we’re going to use to insert the 
iframe into the page. The code acts like a very simple media query. 

Sets 仏 e b^akpoiht 
io pixc | s . 

The b^rcakpoiht is the 

width at -the 

•^ap will be added -to 
the page. 


TV»*»s variable is -fov id -t^c 

v/e wa^*t *to add ma\> *to- 
l/Ve’re us'm^ a variable *to make i\\t 
<dw> casicv" *to m *fu*tuvc- 


Cv>ctks *to see 
\Jf tV^c Wmdo>w " 

v • 比 、 s 

tV>av> tV>c Wcak^o^t 


These Imcs add all 

the attv-ibu-tes 

"to ouv* hew i-Pvarwc 
dcrwCht The 
^ttv-ibutes dhd -theiv- 
valucs wc\rc Copied 
-P'rom the 6\oo(^t 
i-rvarwc Ship 


Adds a i-fv-amc 
clcw'C^'t assies »*t *to 
i\\t maptlcw'C^ vav-iablc 


Maps 


iffet. 


TWis -f mal step 
adds -tV^c i-fv-amc 
(maf0cmcr\*t) m*to 
■tv^c mapto\r\*ta'mCV- 
<dW> (id) bc-fov-c 
如 pav-ajva^ 
tonia'mmj *tV)C I'mk 
(rnaflmk). 


<script type="text/javascript ’，> 
var breakpoint = 481, 
id = 1 mapeontainer ', 
viewportWidth = window.innerWidth; 
if (viewportWidth > breakpoint) { 

var mapElement = document.createElement(*iframe') 
mapElement.id = 1 map 1 
mapElement.width = '300'; 
mapElement.height = '300'; 
mapElement.frameborder = 1 0' 
mapElement.scrolling = 1 no'; 
mapElement.marginheight = '0 
mapElement.marginwidth = * 0' 

mapElement.sre = 'http :/ /maps.google.com/maps?f=q&so 
urce=s_q&hl=en&geocode=&q=334+NW+llth+Ave+Portland, +0 
R+972 0 9&aq=&sll=37.0 625,-95•6770 68&sspn=58.164117,80.3 
32031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+llth+Ave A +Portl 
and,+Oregon+972 0 9&t=m&ll=45.525472 f -122.68218&spn=0.01 
804,0.025749&z=14&output=embed'; 

-^-document.getElementByld(id).insertBefore(mapElement, 



maplink); 


</script> 


The Uf(L 
google /VJaps 
provides is 
^ /ou 

probably 
<Wt Wdht 
io retype 

it. Pmd a 

^opy o-f 
"this toAt ih 
extras/ mapjs. 


Remove the commented-out iframe code 

We no longer need the original iframe code, so delete it 
from the HTML document. 


d — Pelc 七 e Ues! 

<iframe~ id = ”map” width = ” 300 ▼▼ height= M 3 QQ M ~frameborder^" 0 M ~scrollings"no" 

marginheight= M 0 M marginwidth= M 0 M ~src= M http://maps.google.com... M x/iframe> 

- ^ 
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responsible responsiveness 


Add the JavaScript to the Ow Tap Now page 

Now we need to add the JavaScript to the page. Because the map is a 
nice-to-have feature and not essential, we’re going to make it one of 
the last things the browser adds to the page. 


七你 I and -P'md -the 

bo*t*tonr» o( -the HTML dodurwe^t 


WiVc *to add ouv- 
JavaStnft as i\\t vcvv Iasi 

tlos'm^ </loodY> 



Putting nonessential JavaScript at the bottom of the page is a 
great way to make a page load faster. The browser will parse all of 
the HTML and CSS before it gets to the JavaScript. Our visitors 
will have a usable page more quickly and won’t be stuck waiting 
for the map code to load. 



Time to put our work to the test. Grab ontap.html and answer the following: 

o Does the JavaScript get downloaded on mobile phones? 

Load the page on iPhone and Android using www.blaze.io/mobile/. 
Check the waterfall chart to see if the Google Maps code is 
downloading. If your web page isn’t on a public network, you can use 
http://hf-mw.eom/ch2/ex/5/ontap.Mml to test. 


❺ Does the map show up on larger screens? 

Open the On Tap Now page in your favorite desktop browser. Does 
the map show up when the window is wider than 480 pixels? 

o How does the map fit into the responsive design? 

Try adjusting the size of your browser window. Does the map scale 
like the rest of the design? Are there any problems with the map? 
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is the map responsive? 




©oLvtv 


m 

lOH 

田 GET ontap.html 
© CET styie.css 
田 CET tayoul-css 

田 CET bensons_bubbler.jpg 
©GET chapman」owmsdalejpg 
田 CET crystal_sprfngs.jpg 

田 CET hoyt-iPS 
田 GET milendsjpg 
@ CET milo_rmciver.jpg 
田 CET mount_tatJor.jpg 
田 CET omsijpg 
田 GET oxbow jpg 
田 CET pitlock.jpg 
田 GET powells.jpg 
田 CET sandYJ rivef .j 凶： 

田 GET sauviejslatid.jpg 
田 CET the_grotio.]pg! 

田 CET tryoni_creek.jpg 

© CET wellsjargojpg 


How’s it looking? Any problems? 

Does the JavaScript get downloaded on mobile phones? 

Check the page using an iPhone on the Blaze Mobitest service. 
Make your way to the detailed waterfall chart by clicking the HAR 
file link on the results page to see all of the files downloaded. 

The map files are not getting downloaded. Perfect. 

Now what about Android? Blaze says the JavaScript still 
downloads, but it is another false report. 

We mentioned that Blaze had to modify its phones to make them 
work for remote testing. One odd by-product of this modification is 
that JavaScript running on its test phones reports the screen width 
as much wider (800 pixels!) than what unmodified phones do. 

You'll have to take our word for it that the JavaScript works and 
the map code isn’t downloading on Android, either. 



Look Ma, 6{oo^t Maps dovmloads. 

❺ Does the map show up on larger screens? 

Yep. The map looks great in our desktop browser. 


The map shows up ih Chv-omc, 
rweahS ou\r JolVolS^vip-t is wov~kih^. 


VisirUs! 


Os r.\j» r 



* At least 

Call us 

Vl (503) 555-1212 



Qsiabtown q 
1±1 ^ve.oy 
0 



Voyt St 

IV Gl»s3n Stg — 

5 ? ■ ? 


OWEN 

: »elcJ 


How does the map fit into the 
responsive design? 

Uh oh. We’ve got some problems here. The 
map doesn’t scale like the rest of the responsive 
design. Not only that, but there are some screen 
widths where the map overlaps the beer labels. 

x/\kcs. *tv^c Woy/scr v/mdoy/ 

^av-v-ov/s, {\\t w»a\> ovevl 平 
beev* labels. 

Why isn’t the map scaling like 
the images on the page? 
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responsible responsiveness 


These widgets aren't responsive 



The iframe code for Google Maps isn’t 
designed to be fluid. It hardcodes the width 
to 300 pixels. I bet if we change the iframe 
to use CSS, we can make it fluid. 


Responsive Web Design is so new 
that widgets like Google Maps are 
unlikely to be fluid by default. 

When companies provide widgets to embed in other 
web pages, they do everything they can to make 
sure the widget will work regardless of the page 
layout. That often means hardcoding things like 
height and width in the HTML itself. 

Dealing with poorly built third-party widgets is a 
problem for nearly every mobile site. Responsive 
designs have an additional requirement that 
widgets be fluid. 




<iframe id= M map n width="300 n height= n 300" frameborder= M 0" scrolling= n no n 
marginheight= n 0 n marginwidth= n 0" src= n http://maps.google.com..."></iframe> 



o-f attv-ibutes -this i-fv-amc ^ould 

be moved *to CSS. 


Ideally, our HTML would only contain the 
content and markup. It wouldn’t contain any 
presentation information. 





Which CSS properties map to the 
attributes used in the iframe? 
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use css for presentation 


Move iframc attributes to CSS equivalents 

Let’s move as many of the if rame’s attributes to CSS as possible 
and make them fluid while we’re at it. 

First, we need to create a list of attributes we want to move to CSS 
by identifying which attributes are for presentation and which are 
content or metadata. 


Metadata 


Pvese 山七 咖 



P^CSCh-b-tioh 

-^V 


Plrcsch-b-ti 


iOh 


<iframe id= M map n width= f, 300 f, height= n 300 n frameborder= M 0 n scrolling= n no n 
marginheight= n 0 n marginwidth= M 0 n src =l, http ://maps . google . com. . . "></if rame> 


Pv-cscy\*ba*t'ioy\ 


Pv-CSChtcl-tioh 





All those presentation attributes belong in the CSS. 

Match styles to attributes 

Some of the attributes share the same name with their CSS 
comrades. We don’t have to look hard to find the CSS version of 
width and height. Others, like f rameborder, are obscure 
attributes. Fortunately, the CSS counterparts are still fairly 
straightforward. 

Ouv CSS vulcs 

r , 止 cs 七 ^ ma f •“aw 




<iframe 

id= n map'’ 

width= n 300 

height= n 300 

frameborder= n 0 

scrolling 

marginheight= M 0 

marginwidth= n 0 

src="http://maps. 
google.com... n > 

</iframe> 




辛 


Add these rules to 
layout, css. 


Da this! 


#map { 

width :100% ; 
height :100% ; 
border : none; 
overflow:hidden 
margin : 0; 


^ wke the i-Pvamc 

fluid, wcVc 虬如 ㈣ 
Wotm d set humbev* 
pixels -to a 
like 

leaded ih Chapter /. 


|r> CSS, stvollm^ is 
dor\*tv"ollcd by 七 he 
ovcv-flov/ pvopcv-*ty- TWis 
says v/c v/a 灼七 *to Wide 扣 y 
e%*bra dorrtevrt ’mstead 
Jc add'm^ sdvoll bavs. I 七 
a^domplisKcs *tKc same 
七 iVmg as Stv-ollm^ — ir>o . 
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responsible responsiveness 


Remove attributes from the JavaScript 


Now that we’ve got CSS doing the heavy lifting, let’s modify our 
JavaScript so the presentation attributes aren’t set. Remove the 
lines that add the presentation attributes that we identified. 


Fihd "the 山乙 irip 七 
ihc bo-t^or, Ohiap.html. 



<script type="text/JavaScript ，，〉 
var breakpoint = 481, 


id = 'mapeontainer ', 
viewportWidth = window.innerWidth; 
if (viewportWidth > breakpoint) { 

var mapElement = document.createElement('iframe'); 


七 . 




mapElement.id = * map'; 

mapElement.width =~ 1 3 0 0 1 ; 

mapElement.height — ~'300'; 

mapElement.frameborder - ~ 1 0 1 ; 

mapElement.scrolling =~ 1 no 1 ; 

mapElement.marginheight — ~ 1 0 1 ; 

mapElement.marginwidth — ~'O'; 

mapElement.sre = 1 http :/ /maps.google.com/maps?f=q&so 
urce=s_q&hl=en&geocode=&q=334+NW+llth+Ave f +Portland,+0 
R+97209&aq=&sll=37•0625,-95•677068&sspn=58.164117,80.3 
32 031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+llth+Ave / - +Portl 
and,+Oregon+972 0 9&t=m&ll=4 5.525472 f -122.68218&spn=0.01 
804,0.025749&z=14&output=embed'; 


document.getElementByld(id).insertBefore(mapElement, 
maplink); 


</script> 



蜂 T D 赚 


Save layout.css and ontap.html. Load the On Tap Now page in Safari. 

You can use http://hf-mw.eom/ch2/ex/6/ontap.html if it's more convenient. How 
does the map look? 
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map misbehavior 


No one should have trouble finding the pub how 


The map got a little full of itself, didn’t it? It nearly took over the whole 
left column. Soon it will start singing, “I’m the map, I’m the map” to get 
our attention — unless we tame it. 


If you make the window narrow, you can begin to see why the map 
might be trying to get our attention. The map gets squeezed until it 
turns into a thin, tall strip that is completely unusable. 

We still want the map to scale, but we need to set some boundaries on 
how far it scales in each direction. 


sdv-cchshots avc -Pvom 

birowscvs behdve 
di+lewtly. The ^ iWt doi 

ih 如 y W them. 


o 


❺ 



The height of the map is too big. 

Setting the height to 100% makes the map longer 
than the tallest image on the page. Let’s keep the 
map a little more under control by setting the 


Hey look, the map is wearing skinny jeans. 

When the window gets narrow, the map gets so thin 
that most of the information cannot be seen. We need 
to set a minimum width so that the map doesn’t go 
beanpole on us. 


border : none 


'vVtllS FARGO 

"Lin 奶 
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responsible responsiveness 


The map overlap is back 



Earth 


I thought the whole reason for 
making the iframe fluid was to get rid of 
the overlap. We've got everything in CSS now, 
but the map is still covering up the beer labels 
when you make the browser window narrow. 


Moving the iframe presentation attributes 
into CSS was the first step. Now we need 
to take a fresh look at our media queries. 

In Chapter 1, we used media queries to switch the layout 
at 480 pixels. We determined that width based on the 
width of popular smartphones. 

What we’re seeing with the map is that we need to look 
at the content of the page when we make decisions 
about where to apply media queries. 


CalJ us 

+1 ( 舶 ) sss-nn 

s U'/ejoy St 

Pj ■ ， "SpHrigg pp 


唞 St 

Oliaan St 




IH 

r -I ^ Si 


•WEN 

eld 
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become one with your content 


Let the content be your guide 

There’s a problem with using 480 pixels as our breakpoint 
for the media query. Not every phone has the same width. 
And even if a majority of them do today, who’s to say that 
540 pixels won’t be the most common size in the future? 


A better approach is to let your content be the guide on 
when to make changes to the layout. 


We’re not asking you to commune with your content until 
it starts to speak to you. But if you adjust the size of your 
browser window until things don’t look right, the content 
will tell you a lot. 


Maybe images are getting too small. Maybe the columns 
are too narrow. 



When those things happen, that’s where you need a 
breakpoint. Then you can craft a media query to change 
the presentation at that breakpoint. 


We shouldn’t pay so much attention 
to typical mobile and desktop screen 
sizes. When the content breaks the 
layout, it is telling us to adjust our 
media queries and JavaScript. 
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responsible responsiveness 


Time to bend and stretch that browser 


We need to put our content through its paces by making the page as 
big and as small as we can while watching for when the layout breaks. 

But before we do that, we need some way of knowing how big the 
screen is when something looks wrong on the page. The easiest way to 
do this is to install a bookmarklet that will show you the window size. 


A book^irklei is 



VOOKl ^d\rklct is a liiiU U;X ) 广 


Install the bookmarklet w your browser 

Go to http:/ / bit.ly/window-resize and drag the link labeled Window Size 
into your bookmarks toolbar to create the bookmarklet. Click the 
bookmarklet to activate it. Resize your browser and watch the numbers 
change in the upper-left corner of the browser window. 


o o o 


Window Size bookm 



li’H I ^ 1 L®J I 洛 j + http:"ww 

CP SSSS Mobik Perf VS low fools t tempT Window Size 

/'""v 

IVmdow Stic bookmark ih 
Sa-rav-i s bookm^vk bav*. 


O test/debug 



veroft 




Optional; Install an extension 


torv\tr- 


There is an extension for Google Chrome that not only will show 
the window size, but will also resize your window to match common 
screen resolutions. You can get it at http://bit.ly/chrome-resizer. 

The Web Developer Toolkit {http://bit.ly/webdevtoolkit) will display 
page size in the title bar along with a bunch of other useful tools. 
It works in Firefox and Chrome. 



On Tap Now a 

Visit Us! 


Location 

1543 SW Pretend Street 
Portland, OR 97201 




%|terpen your pencil 


Load the On Tap Now page in the browser with the Window Size bookmarklet 
(or a browser extension). Activate the bookmarklet. Resize the browser. 


Write down the width of the browser when the layout breaks or the 
content looks odd. 
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sharpen solution 


— i^^irpen your pencil 


Let’s review some of the trouble spots that show up 
when you resize the browser. 


i>lO pixels ： Bccv labels -boudh -the map. 

At around 610 pixels, the labels touch the map. 
If we’re going to create a new breakpoint to 
address this problem, we’ll need to do it before 
they touch. This means instead of using 610, 
we’ll use 640 pixels as the breakpoint. 


o o o 


CD 


On Tap Now at The Splendid Walrus 


http: / / www.cloudfour.cor 


；；；： Mo bil e Perf YSlow tools▼ temp，Window Size 


610x460 


Lair 


■1 (503) 555-1212 

扁 ,》 w 

[Map 1 S at" I Ter 

4±l(±f 

^0 




Slabtown 


NW Loveioy St 


!f - ft 

Hoyt St 

§ ■ 

\N Gli&an St 2 


< 

w in 

::- 

i 

a 

tt 

m 

-D WEN 




Directions Search r 




Field 


Goose 

Hollow 


* 


一一 

on M Ih« _,-r- - 1 1 — - — - I W _ , 

ooo - - -- ~ 。鲨 * _-• --- 

^^^^^^^^^^^^^^^^^^^^^OnTatNowatTiieSplendid Walrus 


! r c 9ohcr ^ 





l,ZOO pixels: ttuy beer labels. 

As the browser gets wider, the beer 
labels become ridiculously big. 
Where they become too big is an 
aesthetic judgment. For our tastes, 
they start getting too big when 
the browser is 1,200 pixels wide. 





Did you see other problems as you resized 
the browser? How significant do you think a 
problem needs to be before it makes sense 
to address it with an additional media query? 
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responsible responsiveness 


Preakpoiwts to the rescue 

All in all, not too bad. Just a couple of small tweaks to the 
CSS should do it. 


Shrink the huwowgous beer labels 


There are currently three beer labels in each row. When the 
page gets wider, there is room for four beer labels per row. 

Create a media query for windows wider than 1,200 pixels 
that changes the beer labels to four across the page. 


"This Ohly hdppChS i-p 七 lie 

wmdow is bigger i\\^ I,ZOO pixels. 


Sett” 七 he of lis*t i*tcrw Oi) 

dor>ia'm'm3 *tV>C beev labels bo W\W 
f u 七 -fouv labels oy\ cadii vov/. 


@media screen and (min-width:1201px) 

.taplist li { 

width : 25%; v*ulcs 


-to 


^oing to one column sooner 


Even if the beer labels didn’t overlap with the map, the 
layout is getting very crowded at 640 pixels. Instead 
of adding a new breakpoint to address the overlap, we 

can move our existing media query from 480 pixels - - ^ 

to 640 pixels. 

Making this change will convert the layout to a single 
column and hide the map. This has the added benefit 
of applying the single-column layout to phones bigger 
than 480 pixels. 


I Vs tow\WiOV\ *bo sr^sllcv - 

pvoportio^ally as stvccr^s Widev. 




,. Wh 乙 e 

hccd ^daic all 



Ohtap.h-trwl 




<link rel= M stylesheet" type= M text/css" href= M layout.css 
media= M all and min-width : 641px)"> 



•taps.dss 


£c*t m'm— 义七 b\rc3kpoiht 
{jo 厶千 Ip. … JavaS^v-ipt 

"to 


<script type= M text/ 
javascript"> 

var breakpoint = 641, 


</script> 


* Mobile/lower-resolution devices 


V 


@media screen and (max-width : 640px) 



y/icl'tli 

io 厶午 Opx. 
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slimline, responsive — it’s a whole new walrus 



Our mobile - first responsive design is complete 


>u 匕 dh use 

to Vuh you\r owh speed tests. 


I/Vidcsdvcc^ view wi-th -fouv- beev- labels pev~ v~ow 

/ 


You guys rock! The page 
is fast and looks great. 
Drinks are on the house 


• y, •兔決 


況 Tjp Now 


^pkrndid w^trui 


Wl> //m%w 


， / C ^7, X ； /0WJJ , 




°°° + :一 

，. 一 一、， ' 


Performance Result Averages for IPhone In Canada, Ottawa 


AVCRAGC FAGCSIZt 


36&.65KD 


3.75S 


On T\r Now at Tin 
SntNuiM Waiju> 


Your website is faster than 70% of tesled webs.tes 


want to team more aDouinowine Mobitest nertormance 1001 
works ana the Hercentue is calculated? visit our Methodology page 


PorcontwK 


P«rc«ntlit 




npJ/www.ctoiidtour.com^nTi 


1 0 BS1 ° Q 


Wairvowcir views go -to o^t 
^olurnh 5hd hide the map. 


L^VvO 吵乇 3 以 

Jfas-t ov\ 



V Make the HTML as simple as possible and swap the order of the CSS 
so that the mobile version is first. 

~\/ Fix CSS background images so that only one file gets downloaded per 
image. Make sure display : none is being used appropriately. 

\/ Supply different source files for <img> tags at different screen 
^resolutions. Make sure the right size image is downloaded. 

I Use JavaScript to add Google Maps to the page when the browser can 
support it and the document is wide enough to accommodate it. 
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responsible responsiveness 


tJiereiare no ^ 

Dumb Questi9ns 


What exactly is a viewport? 

Imagine taking a sheet of cardboard 
and cutting out a rectangle in the middle of 
it. Lay that rectangle over your monitor so 
you can only see the portion of the web page 
that shows through the rectangle. That’s 
what a viewport does for web pages. 

So the viewport <meta> tag 
tells the browser what size to make the 
viewport? 

Exactly. By default, iOS sets the 
viewport to 980 pixels. If you’ve optimized 
your page for smaller screens, setting 
the <meta-viewport> tag lets the 
browser know to set the viewport accordingly. 


What are breakpoints? 

A- 

Jr \* Breakpoints are just a fancy way of 
describing the resolution at which a designer 
decides to change the layout of a page. This 
is usually done via media queries checking 
to see if a page is narrower or wider than a 
certain number of pixels. 

A complex responsive design may have 
multiple breakpoints, including some that 
make wholesale changes to the layout as 
well as some minor breakpoints that only 
make a few targeted tweaks to fix minor 
layout issues. 

I don’t want to prevent people 
from zooming, but that iOS bug is pretty 
heinous. Is there any way to enable 
zooming and not have a broken page? 

You can find a JavaScript workaround 
at https://gist.github.com/901295. 


Why does the overlap with the map 
occur in the first place? 

Because the map is an element that 
doesn’t scale with the browser window. 

When the window is small, the browser can’t 
scale the map any smaller, so the left column 
ends up overlapping the right column. 

Doesn’t adding a min-width 
to the map break the responsive design 
by creating an element that doesn’t scale 
with the browser window? 

Technically, yes. It seems like a decent 
solution here because we’ve modified the 
media queries to address overlapping 
content. Another option would have been to 
use media queries to adjust the dimensions 
of the map and proportions of the columns. 


BULLET POINTS - 

■ Adding media queries to an existing desktop site may 
make it look good on mobile, but doesn’t mean that it is 

mobile optimized. 

■ Because most mobile browsers don’t support plug-ins, 

there are fewer tools to assist mobile web developers. 

■ Using a proxy server or a testing solution like Blaze 
Mobitest can help you see what is actually getting 
downloaded by a mobile browser. 

■ HTTP archive files and waterfall charts are essential 
performance tools. 

■ Mobile-first Responsive Web Design helps optimize 
web pages by making sure that smaller resources are 
downloaded by default. 


Mobile-first RWD is another form of progressive 
enhancement that uses screen size to determine how 
to enhance web pages. 

Designing for mobile first forces you to focus on what 
really matters, thus helping you remove cruft from 
pages. 

Internet Explorer 8 and below do not support media 
queries. Conditional comments are a workaround. 

JavaScript can augment media queries by testing for 
screen size and adding content when appropriate. 

Instead of designing breakpoints based on the typical 
screen resolutions, let the content dictate the 
resolutions at which you need to modify the layout. 
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3 a sepciTctte mobile Website 


w 


’ Facing less-than-awesdme 

+ circumstances 


Beautiful, harmonious, 
responsively designed websites 
that work for all browsers and 
devices known to man...was it all 
but a wonderful dream? 




The vision of a single, responsive Web is a beautiful one... 

in which every site has one layout to rule them all, made lovingly with a mobile-first 
approach. Mmm...tasty. But what happens when a stinky dose of reality sets in? Like 
legacy systems, older devices, or customer budget constraints? What if, sometimes, 
instead of mixing desktop and mobile support into one lovely soup, you need to keep 
’em separated? In this chapter, we look at the nitty-gritty bits of detecting mobile users, 
supporting those crufty older phones, and building a separate mobile site. 


this is a new chapter 





creature comforts 


Creature Comforts has agents m the field 

Creature Comforts International is a worldwide, nonprofit agency that 
helps treat sick or injured livestock in areas hit by natural disasters 
and provides support to affected farmers and ranchers. Until recently, 
the organization relied on voice communications or the occasional 
ruggedized laptop for their agents to coordinate personnel and supplies. 


Creature Comforts serves 
a lot of areas where the health and 
safety of livestock is tantamount to 
the citizens* financial well-being and 
recovery after a disaster. 



But being able to access and 
exchange information—quickly—about 
people and supplies in our system is 
getting harder as we grow. 


Cv-ca*tuvc 

\/P Commuirud^'tio^ 


92 


Chapter 3 




a separate mobile site 


How can agents get and share the mfo 
they weed? 

Creature Comforts is not a new organization; its roots go back over 
two decades. It already has a lot of internal infrastructure, including 
a significant “traditional” web presence built on a proprietary content 
management system (CMS). 


Weve got people 
worldwide who need to 
stay in touch and get information 
while in the field. We have web 
tools for that already... 



Aw increasing weed for mobile web 


Increasingly, the Creature Comforts staff is finding that the most 
reliable — and often only — connectivity in the field is via the local 
cellular network. Land-based Internet connections are hard to find, 
require more equipment, and restrict mobility. 

Creature Comforts needs a mobile website: one that can support a 
wide array of devices on a wide array of connections. 
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sometimes separation makes sense 



This sounds like a great project. Can’t wait to get in 
and make the agency’s CMS deliver more mobile-friendly 
content and use some responsive design goodness. 


Frank: I’ve got a bit of bad news. Creature Comforts doesn’t have 
a very big budget. There are some internal politics involved. And it 
would take a huge effort to extract the group’s administrative and 
content-publishing processes from its older, proprietary CMS. We can’t 
touch the desktop site, at least for now. 

Jim: Doesn’t that make our job impossible? 

Frank: No, but it might require a bit of compromise. Creature 
Comforts’ website is big and complicated, but the only part the group 
feels it is vital to make mobile-optimized is its so-called Comforts 
Logistics Portal. This web application lets agents give and receive 
updates and coordinate scheduling and supply drops. This part of the 
desktop website is relatively contained and has APIs that we can use. 

Jim: I don’t get it. How do we selectively change only part of the site? 

Frank: In this case, I think we’re going to need to develop a separate 
site for mobile users. 


Jim: That sounds messy. 


Fv-a^k 


Jim ^ 


Sometimes it makes 
sense to create a 


Frank: The mobile web can be a messy job. You know that. We need 
to make this work, and work reliably, for a lot of people scattered 
around the globe. This is not the spanking-new-smartphone crowd, 
either. A lot of the staff members’ devices are donated, older phones, 
and the mobile connections in some of the areas they serve are spotty 
at best. We need a lean, simple, and functional mobile website that 
helps these folks get their jobs done. We simply can’t wrangle their 
existing desktop stuff into what we need. 


separate, standalone 
site lor mobile devices. 


o 


Scared of programming? 
Don’t sweat it too much. 

There is some talk of APIs and web 
applications whirling around, but 
we won’t make you do any of the heavy lifting. Leave 
the programming up to us — your job is to help us 
make it look good and work well on the mobile web. 
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a separate mobile site 


tJiereiare no ^ 

Dumb Questi9ns 


What does a content management system (CMS) do? 

A web CMS is a combination of editing, publishing, and rights 
management tools for creating and managing web content. Some 
CMSes are quite full-featured and provide an environment for 
developing web applications quickly (sometimes these are called 
content management frameworks, or CMFs). 

CMSes let administrative users, who might not be familiar with HTML 
markup or web design, create and manage content. 

There are CMSes in both the open source and commercial spaces, 
written in every programming language you can think of. Examples 
include WordPress, Drupal, DotNetNuke, Joomla!, and SharePoint. 
Larger or specialized organizations sometimes create their own CMS 
software. 

Most CMSes also handle the publishing of content, using templating 
systems or other mechanisms. This can make the transition to 
support mobile devices tricky, as, in many cases, the content is 
tangled up with presentation layers. 


This is the situation with Creature Comforts. Its CMS, designed 
several years ago, has only one set of templates. Retooling 
the system from the ground up would be too expensive for the 
organization right now. 

Is adapting for mobile devices a problem with every web 

CMS? 

The number of CMSes out there is bewildering. Some are more 
easily adapted for mobile devices than others. The problem of mixing 
content, logic, and presentation is certainly one suffered by many 
popular CMSes. 

The development communities and companies behind many CMSes 
are actively working on subsequent releases that are optimized for 
delivering content to different types of clients. And forward-thinking 
folks in the mobile web world are reimagining ways of structuring 
content—treating content more systematically, like application data, 
to makes its reuse across multiple platforms more straightforward. 


Unlike its CMS, Creature 
Com-foV-*U ， API docsn *t 

So \i will make ou\r mobile 

a lot easier. 


APIs Up ckse 



APIs (application programming interfaces) are systematized, 
clearly defined interfaces created so that different software systems 
can talk to one another. An example of a popular API on the Web is 
the Twitter API. The Twitter API defines a set of methods that web 
programmers can use to retrieve and alter data in the Twitter system. 


The Creature Comforts web application team coded the part of 
the website that allows agents and admins to manage people and 
supplies among the far-flung teams. As part of this development, the 
team created an API that can be used to get and update information 
for team members and materials. 


The API returns structured data that our mobile web dev team can 
use to build a mobile web version of the Creature Comforts site. 
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hold while your request is redirected 


Send mobile users to a 
mobile-optimized website 

Sometimes it’s necessary to have a separate website 
for mobile devices and desktop browsers. Often, 
you’ll want your users to be able to go to a single 
domain — e.g., www.example.com — and automatically 
get routed to the appropriate site based on their 
devices. 


kihds o-f 



devices b\rowscv"s 


the v/cbsi-tc (e. 〜 
y/wy/.cxa^plc^om). 



f\ sdvipt oy\ 七 he web sewev 
e%dm'mes vc<\ucst 

av\d *to 

v/Kc*tKcv 七 “e die” 七 is mobile. 




Motile 6l»c^*b avc 
{p *tV^c woWe s’*tc. 



m.example.com 



www.example.com 



Desk-top dieivts stay oh the 
dcsk-top-ov-ichtcd site- 



96 Chapter 3 






































































a separate mobile site 


Swiff out mobile users 

To make this setup work — rerouting mobile devices to the 
mobile-optimized site — the web server needs to know if an 
incoming request comes from a mobile device or not. 



How can you 、、 know 〃 
which browsers are mobile? 


We’re going to make a stab at 
determining whether a user is 
on a mobile device or not by 
looking at the User-Agent HTTP 
header sent by the browser. 

There are other techniques, but user-agent 
detection is a very common server-side 

aPPr0aChf ° rdeViCedeteCtl0n ' ^ 

This is dom^ohly 

died Vcir-agcht 


A user - agent string is a 
piece ol text tkat serves 
as a sort oi ID caret lor 
a client application (in 
our case，wet browsers). 


Eack unique browser is 
a unique user agent. 

abbreviated *to w WA- 
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user-agent sniffing (seriously) 


ftettmg to know user agents 

Web browsers — and, yes, that includes mobile browsers — send a User - Agent 
header as part of the HTTP request whenever the browser sends a request 
for a web page or resource. 

User-agent strings have long been used (and misused) by webmasters to identify 
(and misidentify) browsers. Way back in the misty history of the 1990s, so-called 
user-agent sniffing was the bane of millions of users faced with ubiquitous “This 
site better viewed in Internet Explorer” (or Mozilla or Netscape or whatever the 
preferred browser flavor was at the time). 


GET / pretty.png HTTP/1.1 
Host : www.example.com 

Accept : text/html,application/xhtml+xml,application/xml 
Accept-Encoding : gzip,deflate,sdeh 
Referer : http :// www.example.com/foo 

User-Agent : Opera/9.64(Windows NT 5.1; U; en) Presto/2.1.1 


Simplified structure of an HTTP request 



Request I'mc 



Rc<\ucs*t iicadcv-s 



Request body (i-f a^y) 


User-agewt archaeology 

The structure of user-agent strings today is a curious and sometimes confounding 
patchwork of convention, confusion, and trickery. Full order has never successfully 
been imposed over how they are written. So you can end up with things like: 


Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like 
Gecko) Chrome/14.0.792.0 Safari/535.1 




CWornC 1^ \rwrm 叫 Oh 

lV'mdov/s … J touvse. 


Why would the user agent for Chrome on Windows mention Safari? What’s 
KHTML, and how is it “like” Gecko? Like your appendix or the stumpy leg 
remnants in whales, some of this is evolutionary cruft. 


The vestigial “Mozilla compatibility flag” (Mozilla/5.0 in the example above) is 
practically omnipresent to this day, though it doesn’t mean much anymore. Mentions 
of Mozilla, KHTML, Gecko, or WebKit are UAs’ way of claiming that their layout 
engines are comparable to or “better” than those. At the time of this writing, all 
WebKit-based browsers on mobile devices except for Android mention “Safari” in 
their user-agent string (Apple originally developed WebKit, basing it on KHTML). 
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a separate mobile site 


- User Vay Up Cl^se 

Let’s take a deeper look at the pieces of some real-life 
user-agent strings. 


lA/mdo^s \/'»sta (v/c me 七 
七 Wis oy\ pay 1 必 ). 


Mozilia/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, 
like Gecko) Chrome/14.0.792.0 Safari/535.1 



Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; 
Trident/3.1; 工 EMobile/7•0; SAMSUNG; SGH-i917) 



^ SarhSUh 9 P^ohc ^uhhiha 
^'^dows Phohc 7 


A Bla^kBc\rvy 

VOO (Bold) 


BlackBerry9700/5.0.0.442 Profile/MIDP-2•1 Configuration/CLDC-1.1 
VendorlD/612 


Analyze some of the pieces 


Windows NT 6 . 0 


Windows Phone OS 7.0 



Pla-b-fo^rm, OS, a^a vcvsio^ 


Bv*owscV" dhd vc\rsioh 


IE Mobile/ 7.0 
Chrome/14.0.792.0 




Layou-t (TVide 灼七 — 

is lE^s layout ^ 


TWis Wo 戒圹 ， s 

Wrbh 

ov- Wis*tov^allY 
based 外。灼 … 


… i^isdclldheous clcruCh'ts 



Java \rur>"timc -fov 
rwobile devices 


Configuration/CLDC-1. 


4 


AppleWebKit/535 
Trident/3. 


丁 schds model 

1 十 hot -this 

ISh 七 ^ommoh. 



Java -fvamev/ov-k 


广 |dcir>ti-f ics *tKc 
vcy>dov/dav-v*icv 


SAMSUNG; SGH-i917 
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what's my purpose 










+ 



You’ve seen a few user-agent strings dissected. Now you try it. Match each snippet, 
extracted from the user-agent strings above, to its purpose. 


fre^tQ/2AA 

OS, platform, and version 

Apple Wek^!t/534.1+ 

Historical/compatible flag 

Windows JsTT5.1 

Browser name and version 

jVfezllk/5.o 

Layout engine 

Verslon/6.0.0 .246 

Historical/compatible flag 

like Gecko 

Layout engine 

Opero/9-^4 

Browser version 


► 加 swers on page 102. 
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a separate mobile site 


User agents: spawn of Sataw? 



So, if we use user-agent sniffing to 
figure out which devices are mobile, 
isn't that just enforcing the same 
old bad behavior that created the 
user-agent mess in the first place? 


Well, sort of. 

Utter the term “user-agent sniffing” loudly in a room full of 
web developers, and you’ll invariably get some stern looks of 
disapproval and a couple of urgent, strangled sounds. 

User-agent sniffing rubs a lot of developers the wrong way. We’ve 
already seen how complex user-agent strings can be. In addition, 
user-agent spoofing, in which a user (purposely or not) configures 
his or her browser to send a different UA header, is common. And 
there are thousands upon thousands of unique UAs, with more 
entering the market every single day. 


Detecting mobile browsers by sniffing user agents on the server 
can definitely seem like an inelegant and inaccurate hack. But 
sometimes it’s the best (if crude) tool for the job. 



Can you think of some reasons why user-agent 
sniffing might be a necessary evil? 
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exercise solution 




Pv-CS*to IS *b^c 
O^cv-a fe\ro>/sc\r 
\^/ o \ a {, cy\—c. 









“費，免 霉轚， - 


OS, platform, and version 


Historical/compatible flag 


Browser name and version 


Layout engine 


Historical/compatible flag 


Layout engine 


Browser version 


What browsers arc these? 

Curious about the example user-agent strings used for this 
exercise (on page 100)? Here are the clients they came from, 
unmasked for you: 

A Droid Eris (aka HTC Desire) Android 
phone running the Android 2.1 browser 

❺ Opera 9 running on Windows XP 

o BlackBerry 9800 (Torch) running the 
BlackBerry OS 6 browser 


Compare the BlackBerry Torch (OS 6) UA on page 100 
against the BlackBerry Bold (OS 5) UA on page 99. 
Different, huh? As of OS 6, BlackBerry browsers use 
the WebKit layout engine, and their UA strings look a 
lot more like other WebKit browsers. 



Watch it! 


Not all user-agent 
strings follow 
consistent patterns. 


Some user-agent strings 
make a lot more sense 
than others. User agents don’t 3ll 
use the same constituent parts, and 
some are outright peculiar. There are 
some basic patterns that most follow, 
but don’t rely on that too much. Don’t 
worry! We have some good tools to 
account for (most of) this. 
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a separate mobile site 


What about the other parts of user- 
agent strings on page 99 that you didn’t 
explain? What does en-us mean? What 
does U mean? 

The “en-us” is language information, 
and means that the browser and its interface 
elements are localized for English, US- 
style. The “U” indicates that the browser 
has “strong” security (as opposed to T for 
“weak” security, or “N” for no security at all). 
To analyze other various bits of user-agent 
strings like this, make a trip to the ever-so- 
useful www.useragentstring.com. 

Is there seriously a different user 
agent for every build, release, version, 
platform, device, whim, and vendor out 
there? 

Pretty much. 

Does anything else send 
User-Agent headers besides 
browsers? 

Several other kinds of applications 
that make requests to web servers also 
send User-Agent headers. These 
include, but aren’t limited to, search engines, 
crawlers, and various Internet bots (both 
benign and nefarious). Sometimes web 
server logs capture user-agent information 
about unusual things that are accessing 
our sites, like a web viewer built into, say, a 
note-taking desktop application, ora web 
bookmarking tool, ora monitoring service that 
pings a site to make sure it is operational. 

^^,-Why would people “spoof” their 
browser’s user agent? 

Why would anyone purposely ask 
their browser to “lie” for them, you ask? 


tJiereiare no ^ 

Dumb Questi9ns 


A few reasons. Two common motivations 
are privacy and the desire for a specific 
experience. Some users don’t want to share 
information about what browsers they are 
using. In other cases, a user might want 
to try to see web content in a particular 
way. A popular example is the “desktop 
mode” available in several mobile browsers. 
By turning this on, users are often (and 
sometimes unknowingly) causing the 
browser to send a different User-Agent 
header, one that looks more like a desktop 
browser. Sometimes this is done sanely, 
and is just fine—Windows Phone 7 desktop 
mode user agents are relatively easy to spot. 
But not always. Take a look at the user- 
agent string that one of the Android versions 
of the mobile browser Skyfire sends when in 
desktop mode: 

Mozilla/5.0 (Macintosh; 

U; Intel Mac OS X 10_5_7; 
en-us) AppleWebKit/530.17 
(KHTML, like Gecko) 
Version/4.0 Safari/530.17 

If that looks an awful lot like desktop OS 
X Safari, that’s because that user agent 
is completely identical to one of the user 
agents for desktop Safari. 

But if someone has gone to the 
trouble of disguising his mobile browser 
as a desktop one, shouldn’t we respect 
his wishes and give him a desktop 
experience? 

Though this is a delicate question of 
philosophy, we tend to lean toward “yes,” 
and fill in the gaps with responsive design 
(which will adapt to the environment no 
matter who or what the browser claims to be, 
assuming the browser is modern enough to 
support media queries and the like). There's 
a bit of a gray area in terms of whether users 
know what they’re doing or not, but, hey, as 
far as we’re concerned, you should get what 


you ask for. Disagreement abounds between 
developers on this point. There be dragons. 
Tread lightly. 

Hey, you totally neglected to 
mention UAProf. 

Many mobile devices send UAProf 
(User-Agent Profile) headers when making 
requests, often (but not always) as the 
x-wap-prof ile request header. The 
UAProf specification gives mobile handset 
manufacturers a way to provide information 
about the device. Usually, a link to the 
location of the UAProf is provided in the 
request header. 

This sounds pretty good, but unfortunately, 
not all devices and browsers send UAProf 
headers. Additionally, a rather unpleasant 
percentage of the links to UAProfs are 
not valid. And there is inconsistency in the 
amount and quality of the data in the UAProf 
files themselves. 

OK, so, there are a million billion 
user agents and UAProfs aren’t all 
that reliable, yet you claim that there 
is a sane and reasonable way to do 
user-agent-based detection? 

Chapter 5, we’ll be meeting some 
organizations and projects whose entire 
existence is concerned with tracking user 
agents and building databases of metadata 
about them and other data sources like 
UAProfs. Until then, we’ll keep it simple 
and use a basic server-side script to look 
for user-agent strings that bear the primary 
hallmarks of mobile browser user agents. 
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user-agent sniffing isn't all bad 


Straight talk: Most major sites have a 
separate mobile website 

The majority of the world’s biggest websites have a separate mobile site, 
and a majority of those use some form of user-agent sniffing to route 
traffic. If user-agent sniffing is so derided, why is this the case? There 
must be some goodness in the user-agent approach. 

Some things seem wore natural ow the server side... 

Redirecting incoming traffic to a mobile site is something that fits 
naturally on the server side. If we’re sending mobile requests off to a 
separate site — something that we’ll need to do for Creature Comforts — 

decisions are best made before content is sent to the client. 

"and the User - Agent header is our best clue 


The User-Agent header, while imperfect, is the most 
straightforward and reliable clue the server has about the 
requesting browser. There are a few other HTTP request headers 
that provide hints to a client’s “mobileness，” but none so ubiquitous 
as that maddening User-Agent header. It’s the best option in a 
pile of not-so-great alternatives. And, while we’ve gone to certain 
lengths to point out where user-agent sniffing can go wrong (hey, 
devil’s advocate!)，most of the time it can be used accurately, especially 
when wielded responsibly. 
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OK. Say we do build a separate mobile 
site. How exactly are we going to see the user 
agents of requesting browsers...and how are we 
going to get the mobile traffic to the new, mobile 
version of Creature Comforts? 


We can use a simple，freely 
available script to perform 
basic mobile device 
detection. 



a separate mobile site 


Whew what you really wawt to do is (re -) direct 



Wouldn’t such a script 
need to go on Creature Comforts* 
existing (desktop) web server so it can 
detect mobile browsers and redirect them 
to our mobile site? I thought we couldiVt 
make any changes to the existing site. 


Good catch. Fortunately, Frank and 
Jim have been able to work with 
Creature Comforts’ IT department. 

We’ll be able to put a simple redirect script on 
the agency’s existing web server. The web team 
at Creature Comforts will include the mobile 
detection script at the top of each page, so that 
mobile traffic can be redirected. 

^et ye to the script 

Time to make a quick trip to 
www.detectmobilebrowsers.com. There you’ll 
find a free, simple mobile detection script. 

We want to be sure you have the latest 
version, so go get it now! Make sure to 
download the PHP version. 




Detect Mobile Browsers 


source mobile phone detection 


No mobile browser detected. 

M.COSX .0_7_2J App<.W.bKIt/534J0(KHTML,lik.G«ko) 

_ _ _ Download Scripts 

BSGIGSaGSBaBGIIBSEBl^ 

Redirect Mobile Browsers l 

If it's not a mo bile browser, take therrK 


'-*/534J0 


PHP 


The sdv*ip*t is available (os 


SdVlPt 

v A\((t 


md^Y (XyWCrtr^ la^^ua^CS 

av\d 


rovms. 


waht -the 
PHP vevsioh. 
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script taming 


Take a peek at the script 


Q 


Q 


c 


<?php ❶ 

$useragent=$_SERVER['HTTP_USER—AGENT，]; 

if(preg_match(' / android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iem 
obileI ip(hone|od) |iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phon 
eIp(ixiI re)\/|plucker|pocket|psp|symbian|treo|up\. (browser|link) |vodafone|wap|wi 
ndows (ce|phone)|xda|xiino/i',$useragent)|| preg_match('/1207|6310|6590|3gso|4thp 

1 50[1-6]iI 770s I 802s I a wa|abac|ac(er|oo|s\-) |ai(ko|rn) |al(av|ca|co) |amoi|an(ex|ny 
Iyw) IaptuIar (chI go) |as (te|us) |attw|au(di|\-m|r |s ) |avan|be(ck|11|nq) |bi(lb|rd) | 
bl (acIaz) |br(e|v)w|bumb|bw\-(n|u) |c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co( 
mpInd) I craw I da(it 1111ng) |dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d) |el (49|ai) 

Iem(12 Iul) Ier(icIkO) |esl8|ez([4-7]0|os|wa|ze) |fete|fly(\-I_) Igl u|g560|gene|gf\- 
5 Ig\-moI go(\.wIod) |gr(ad|un) |haie|heit|hd\-(m|p11) |hei\-|hi (pt|ta) |hp ( i|ip) |hs\- 
cIht(c (\-I I_I a IgIpIs11) |tp) |hu(aw|tc) |i\-(20|go|ma) |i230|iac( |\-|\/) |ibro|idea| 

igOlIikom|imlk|inno|ipaq|iris|j a(11v)a|j bro|jemu|jigs|kddi|keji|kgt( |\/) |klon|kpt 

Ikwc\-Ikyo(cIk) |le(no|xi) |lg ( g|\/(k| 1 |u) |50|54|e\-|e\/|\-[a-w]) |libw|lynx|ml\- 
wIm3gaIm50\/|ma(te|ui|xo) |me(01|21|ca) |m\-cr|me(di|rc|ri) |mi( 08 |oa|ts) |mme f|mo( 

01 I 02 IbiIdeI do 11(\-I |o|v) |zz) |mt(50|pi|v ) |mwbp|mywa|n10[0-2] |n20 [2-3] |n30 (0|2 
)In50 (0 I 2 I 5) In7 (0 (0 I 1) |10) |ne((c|m)\-|on|tf|wf|wg|wt) |nok(6|i) |nzph|o2im|op(ti 
Iwv) I oran Iowgl|p800|pan(a|d11) |pdxg|pg(13|\-([1-8] |c)) |phil|pire|pi(ay|uc) |pn\- 

2 Ipo(ckIrtIse) |prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7] |i\-) |qtek|r380|r60 
0 Iraks|rim9|ro(ve|zo) |s55\/|sa(ge|ma|mm|ms|ny|va) |sc (01|h\-|oo|p\-) |sdk\/|se(c(\- 
|0 I 1) I 47 I me IndIri) |sgh\-|shar|sie(\-|m) |sk\-0|si(45|id) |sm(al|ar|b3|it115) |so(f 

11ny) Isp(01 Ih\-|v\-|v ) |s y(01|mb) 112 (18|50) 116 (00|10|18) |ta(gt|lk) |tcl\-|tdg\- 
|tel(iIm)Itim\-|t\-mo|to(pi|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|gl|si)|utst|v40 
0 Iv750IveriIvi(rgIte) |vk(40|5[0-3] |\-v) |vm4 0|voda|vulc|vx(52|53|60|61|70|80|8 
1 I 83 I 85 I 98) Iw3c(\-| ) |webc|whit|wi(g |nc|nw) |wmlb|wonu|x7 00|xda(\-|2|g) |yas\- 
|your Izeto|zte\-/i' , substr($useragent,0,4))) 

header(* Location : http :// detectmobilebrowser.com/mobile *); 

?> 


This is 七 he sdv-ipi/ 
The o^c you 
dovmlodd rwijlvt 
⑽七 look 
七 he sa^c (i-t 

be a hCWCV- 
vcv-sio^), bu 七 i 七 
should be similav*. 


detectmobilebrowser.php.txt 

o 


The script might look a bit 
beastly right now，but we don’t 
have to do much to tame it. 

When you first open up 
detectmobilebrowser.php in your preferred text editor, you 
might find it a bit.. .brutal-looking. But fear not. We’re 
going to walk you through the basics of how it works, 
but, really, all you have to do to get it to work is make a 
couple of small changes — and we’ll show you how. 




Da this! 


Rename this file 
redirect.php and save it 
inside the chapter3 folder. 
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How does the script work? 

The script examines the user-agent string and determines 
whether it seems mobile — and if so, it redirects. It does 
this in three steps: 


o It grabs the requesting browsers user-agent string. 

In PHP, this is accessible in the global 
$ SERVER [ 'HTTP USER AGENT，] variable. 



It uses some carefully crafted regular expressions. 

There are two regular expressions here. Both look at the 
user-agent string and see if it matches known mobile values. 
You can probably spot some obvious snippets like “hiptop” or 
‘symbian.’’ But there are some more obscure things in here as 
well — these regular expressions were developed by people who 
really know the mobile landscape! 


h v-cgulav* expression, a k a- 

U )) u )). 

o\r is a 

■ro\rrwal o-P 


patteas ’m 





It redirects browsers whose user-agent string 
matches either of the regular expressions. 


If the browser’s user-agent string matches either of the 
regular expressions, the script sets a Location header with 
the designated place to redirect mobile traffic. 

gy dc-fault mobile is 

{p y/y/y/.drt^Uobilebvoy/sencwy mobile - 

well *to tWis. 




Make sure your working 
environment is seaworthy 

A few safety checks before we continue! 
The next sections — and many more in the 
book — require you to have a working web 
server that allows you to use PHP. This 
can be your own computer, or you can 
use a hosting provider; we’re not picky. 
But if you haven’t done so yet, go now to 
Appendix ii and find information about 
how to get yourself squared away. 
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tweak your redirect script 


Make a mobile mockup 



Jim: Hey, Frank, how are you going with getting started on Creature Comforts’ 
mobile site? 

Frank: I thought it might be a bit much to try to handle writing code to work 
with the agency’s APIs and do the mobile design at the same time, so I’ve 
whipped up some quick mockups for us to start with. One thing at a time, right? 

Jim: Sounds good. Did you use responsive stuff? 

Frank: Well, yes and no. I used proportional widths, but figured we’re working 
with older phones that might not understand media queries and other things 
that make responsive designs work so well. I took the desktop HTML templates 
for the current Agent Portal landing page dashboard thingy, simplified the heck 
out of them, and refactored the CSS to be mobile-friendly. I used some sample 
data so we don’t have to worry about functionality or APIs or anything for now. 

Jim: What about the mobile device detection and redirect script? How are we 
going to test that? 


Frank: Well, you heard that we’ll ultimately put it on Creature Comforts’ server 
and those folks will call it from every page they serve. But for now, we’ll want to 
test it locally to check out how the redirect will behave. 


A few tweaks to the mobile redirect script 

We’ll need to make a few customizations to the redirect script so that we can see it 
in action. We’ll want to add a new line to define where the script should redirect 
if it sees a mobile user. The PHP $ SERVER [ ▼ HTTP HOST ▼ ] variable is the 
name of the web host that the script is running on. 


〖The o-f "tKc y/cb (-tA 

u |odalhost/ ? 

ov* \0.0.0.2- l) o\r sor^esudh i-f 
you \rc doih^ you\r y/o\rk ov\ youv- 
ovm 


We’ll also want to edit the line that sends the Location response 
header — we want to redirect mobile traffic to our mobile mockup, not t 
www.detectmobilebrowser.com site. 


^ Just as art 
he \ Baders (like 

^s ? o^s C s batk fey 

SCV"VCV*) 3lso 


<?php 

$useragent = $_SERVER[ ， HTTP_USER—AGENT，]; 

$mobile location = ' http : //' . $ SERVER['HTTP HOST'] . '/index mobile.html'; 


if(preg_match(...)) 

header('Location : ' . $mobile_location); 

?> 



redireetphp 
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嘴 T D 赚 


Copy *tKc dOh*tcir»*ts o( *thc o 

dhap*tcv~? -foldcv- *to youv- y/cb 
scv-vcv^s dodumc^*t \roo-t- 



❹ 


chapter3 CSS ba 匕 kgvouhd 


e 


cows.jpg 



S-buW ^ov laW ； 
ort -fov v\ov/- 


extras 



o 


Put the contents of the chapter3 folder at the root of 
your web server. 

If you don’t want to put the files at the document root, no biggie. Just be 
sure to update the path in the line that defines $mobile_location. 

Make the edits from page 108 in the redirect script. 

Open the redirect script again in your text editor (if it’s not open 
already). Make the edits in the script and save it. 

Edit index.php. 

Add the following line to the very top of the index .php file: 

<?php require_once('redirect.php'); ?> 

Save the file. 

View the mockup in a mobile browser (emulator or real life). 




-II 


index.php 



index—mobile, 
html 


Thcvc^s Y\0 

(or PttP 

(\\t, so y/e’ll 
make *i*t ivW 





redireetphp 



丁 Wis is 七 

•七 sd.vif*b 
you dio>/^lo3dcd 
dv\d edited- 


styles.css 


Comforts Agent Por\a\ 


座 r . 7:12 PM 

Creature 

spleodidwa iruscom/c. 

Creature Comforts 

Agent Portal 

Welcome back. Dr Jessica L\ans 

Your Dashboard 
Messages (2) 

Your Schedule 
Request Supplies 


1026 AM 


jary 4: Loading supplies and contacting 
hel to assist with flood event in 
Bsh. Contact HO if you are currently 
duled and available to assist in Ihe 


®9 e Supply Request #493-04 
Approved 

Hi, Jess. Good news! I 
wanted to lei you know that 
we were successful in tracking 
down those bottles... 


A 

TV^c modcuf viewed cm 
iPiior\C — simple) 
but i 七 wov-ks. 


ge 


Supply Request #493-04 
Received 

This is an automated 
message to oonlirm that /our 
recent Supply Request has 



f ^lax 


These are just mockups. 

The mobile mockups we’ll be using 
throughout this chapter are just that — 
mockups. They use sample data to 
represent what the site will look like when “plugged into 
real data APIs. The data represented is imaginary, and 
many links aren’t functional. Don’t worry about it! 


5 ? 
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opera mini 


Special delivery...of complicating factors 



Hey, Frank. I checked with the 
team that handles distributing phones to 
our staff, and it says that a lot of the phones are 
running a browser called Opera Mini. 

I also overnighted you a package of some of the 
common phones were using so you can 
test them out. 


Opera Mini, huh? 

Hotshot browsers like BlackBerry’s WebKit 
browser and iOS’s Safari get a lot of glory, but 
don’t discount Opera Mini! The sister browsers 

Opera Mini and Opera Mobile are the most 
popular mobile web browsers in the world. 


In the middle of 2011, for example, Opera 
reported over 110 million users. That 
accounted for more than half of mobile web 
traffic in India, and over 90% of mobile web 
traffic in Nigeria. 


Opera Mini is especially popular in places where 
connectivity is slow, or data is expensive or limited. 


Opera Mini is actually a mobile transcoder. 
This means that when a user goes to a web page 
in Opera Mini, the request is routed through 
Opera’s servers, where web pages and resources 
are compressed and optimized for mobile devices. 
This optimization means fewer bytes are ultimately 
delivered to the device — resulting in a faster (and 
often cheaper) experience. 


Bcdausc its made *to 
a y/'ide o-f 

lov/CV"—Cir\di) 

Mmi a bit 

■bV^a^ -full—fcaWcd 

bv-ov/scv"S. 


Opcv-a isr / 七 just a 

dcvdop*mj-wo\rld Coy\Ccvv\. I^s 
also ^uiic fofula\r ov\ -Pcaiuvc 
phones *m -the US Euv-opc. 
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Cool. If II be handy to have these 
phones on hand for testing. On the 
other hand, wow. Some of these phones are 
pretty old and obscure...and I wonder how the 
mockup will look on Opera Mini. 



this! 


We’re going to be looking at the mobile mockup in Opera Mini 
4.2. Fortunately, Opera has a convenient, web-based simulator 
(it’s a Java Applet) that you can use. Point your web browser at: 


http://www. opera. com/mobile/demo/?ver= 4 


%|terpen your pencil 


Let’s see how the mobile mockup looks in the Opera Mini 4.2 simulator. Use the web-embedded 
Opera Mini simulator to view the mockup at http://hf-mw.eom/ch3/ex/1/. 


Make some notes about what looks different (or, alas!, broken). Can you find at least four differences 
between the way the mockup looks in the Opera Mini simulator versus the iPhone or Android 
simulator (page 109)? 



o 
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exercise solution 


c^Sharpen your pencil 

Solution 


The mockup looks pretty different in Opera Mini 4.2, huh? Let’s look at some of 
the places where it differs or is weird. We found five trouble spots. 


Creature Comforts Agent Por« 


O Creature Comfor 
Agent Portal 




- ' ■ 

- 


O 


1 


Wi 

-❺ — 


Welcome back H Dr. Jes 
Evans 


Creature Comforts Agent 


Menu 


_ 


February 4: Loading supplies and 
contacting personnel to assist with 
flood event in Bangladesh, 

HQ if you are currently 
unscheduled and available to assist 


c O" 


t 

4 SHI 

7 pors 

本 


o 


Messag es Supply Request 
Feb 3 C4 Approved! 

S:54PM EST Hi r Jess. f Good news 
to let you know tf, 
successful in trac^ 
those bottles... | 



Menu 


_ 


11:35 




i 

4 QHI 
7 PQRS 

本 


OK 

2 ABC 

5 jkl 
Stuv 

0 


3 DEF 

[3! 

9wxvz 

# 


o 


❺ 


The <U> arjd <h2-> -tags arc. ^o-t styled 
a^d. arc ^ui*tc small ； Because this ； -the 

\ y \ the hc<adcy ； seems 

k*md <^ silly. 


I/Ve dSh-i v-cally 
style a^y o-P -the 

•… Opcira Wi. 


The eh*ti\rc pa^e is -too wide a^di disappears 
*thc jrijh't side of *the sdreeh ； 

TWis o^cs a do 叫 . 


.T^i. 知 3 . 3? 姑 ^ippjicd 

very vydl : Italic *tc^t is hot ^v\d 

• 七 d !w 大 . 

o • |y\s*tcad. oJp rounded, dormers ； y/c get . 

square ohes. 


o 


^>ov\\aS po'm*ts 1 -f 
The status message uses overflow ： y/o\Ar\ohud 

sdy-ollA.wXh.i? . 和 . 3psolu*tc r\o-.ho oy\ aH /\^dro*id alvcady^ 
mobile devices. Gorrterrt is du*t o^f, and 


sdrollmj is r\o*t y/o\rk*mj. 


thereiare no ^ 

Dumb Questi9ns 


Why do I have to view this example on http://hf-mw.com? 
Why can’t I use my own copy? 

Opera Mini is a proxy browser. That means that all web traffic 
goes through an Opera server. So, the example mockup and other 
code bits have to be hosted somewhere that Opera’s servers can 
reach. 


If you are doing your work on your own computer, you may well have 
an IP address that is not visible to the entire Internet (a so-called 
internal IP address only visible to the network you are connected to). 

If you are doing work on a hosting provider or otherwise have the 
web pages for Creature Comforts on an externally accessible web 
server, you can certainly use your own copy. 
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Not all phones arc smartphowcs...wot by a sight 

In many of the countries that Creature Comforts works in, seeing a 
smartphone is a rarity. In India, smartphones sales are projected to be less 
than 6% of the total phones sold during 2011. No big deal...right? 

How many phones does India have, anyway? 

As of August 2011， India had over 850 million mobile phone subscribers. 

This makes India second only to China in total number of mobile phones. 


While smartphones are a rarity in India, mobile phones 
are more common than toilets! 


T . / 

丁 his is ho jokihg The U/V 

issued a ircpovt dompav-ihg ihc 

easy addess -to mobile phones -fco 
poo\r sahitatioh ih-fv-as-tv-udtuv-c. 



What if my users aren't in India? In the 
US, everyone uses smartphones. I shouldiVt 
have to worry about those feature phones. 


Emerging markets aren’t the only places where 
feature phones outnumber smartphones. 

Only recently did the sales of smartphones exceed feature 
phones in the United States. Sometime in 2012, smartphones 
will finally represent the majority of phones in America. The 
same is true of most European countries. 

When you see reports about the explosive growth of smartphones, 
keep in mind that even with that growth, it will take quite some 
time before all of those old phones have been replaced. 

Ami hey, feature phones aren't all that bad 

Sure, they cause us heartache with their older, quirkier browsers 
and often poor connections, but feature phones have made a 
huge difference in the lives of many people around the world. 

If you want to see some serious innovation, travel to a country 
with an emerging market and watch how they use mobile phones 
for everything from farming to banking. 

For many, a phone isn’t a cute, pocket-size, lesser version of a 
modern computer. It is their primary connection to the world. 
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meet xhtml-mp 


Lcfs keep it basic: Meet XHTML-MP 


If you look again at index—mobile • html, you’ll see that the 
mockup currently uses this DOCTYPE declaration: 


<!DOCTYPE html> 


That’s the DOCTYPE for HTML5, an excellent and exciting 
choice for robust websites and web apps in this modern world, 
but not necessarily right if we want to reach and support the 
kinds of mobile devices that the Creature Comforts staff 
members use. It’s time to introduce you to our newest friend, 
XHTML Mobile Profile (XHTML-MP). 


XHTML-MP is a flavor of XHTML developed specifically to 
support mid-level and feature phones with fair to middling web 
browsers. It’s a few years old now — and increasingly overlooked 
in favor of its sexier, younger cousin, HTML5 — but it’s still useful 
for projects like the Creature Comforts mobile site. 


XHTML Motile Profile 

is a sutset oi tke desktop 
(X)HTML you know and love. 
It’s a streamlined version oi 


HTML ctesigfnect to perform 
well on a lot oi ctiHerent 
motile trowsers, Anct a 
lot oi mobile browsers are 
ctesig[nect to support it. 



BaK^ 

©octyvE 



Let’s convert the mockup page to be an XHTML-MP document. Edit the 
index_mobile.html file and replace the HTML5 doctype (top line of the 
file) with the following two lines: 




<?xml version= n 1.0" encoding= n UTF-8 n ?> 

<! DOCTYPE html PUBLIC ， ▼- "WAPFORUM//DTD XHTML Mobile 1.2//EN" 
"http :// www.openmobilealliance.org/tech/DTD/xhtml-mobilel2.dtd"> 


P :: x ls 

娜 L dc ^iio^ -to 0 . 




tw,s pocrvpe u 

yttTML •- MP vcvsio^ I 2-. 

T^aVs most vc 

A 妁 d yes, wc khow wc said 

lihcs/' but it docs^i all 

lit Oh-to the pay. 




index mobile.html 
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Why would we want to use that old thiwg? 



All we did was change the 
DOCTYPE declaration. That 
seems totally pointless. Why 
can’t I just use HTML5? 


We admit it. On the surface，using 
XHTML-MP doesn’t seem very thrilling... 

It doesn’t support some of the things we like to use 
in our HTML, and modern phones are increasingly 
supportive (or at least tolerant) of HTML5 markup. 

...but something actually did happen as a 
result of our doctype change. 

If you load http://hf-mw.com/ch3/ex/2’m the Opera 
Mini 4.2 simulator, you’ll see a striking change. 

Explicitly using XHTML-MP as our DOCTYPE 
changed the way the browser behaves! 

No longer do we have the content escaping the bounds 
of the page. Instead, the buttons and floats all fit within 
the page width. 

Turns out, Opera Mini takes the HTML5 DOCTYPE 
as a “hint” that it is supposed to behave a bit more 
like a desktop browser. That means layout that has 
percentage-based widths — responsive layouts, for 
example — might not work exactly as we expect. 



Watch it! 


Our job is not done here: 
we can’t just change the 
doctype and call it a day. 


1/1/eVe changed the doctype 
to XHTML-MP, but that do ㊀ sift 
mean that the markup is valid XHTML- 
MP markup. We also need to make some 
changes to our code to make it actually 
XHTML-MP. 


Creature Comforts Agent Por„ 


Creature Comforts 
Ag&m Portal 




WeEcome back, Dr, Jessica 
Evans 


Your Dashboard 


Menu 




19:18 


Back 


_ 


1 

4 QH1 

7 P0R3 

本 
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2 ABC 
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mobile-specific DOCTYPE benefits 


Keep your nose clean with XHTML-MP 

It’s not always a thrill a minute, but using a mobile-specific DOCTYPE 
helps us because: 

o It ensures support on many older mobile browsers. 

Though most mobile browsers won’t choke and die when they encounter 
an HTML5 document, they might. And some of the features supported 
in HTML5 just plain won’t work on a lot of older phones. 

❺ It reminds us of potential mobile pitfalls and keeps us honest. 

If a feature isn’t supported in XHTML-MP, there is quite likely a reason. Using 
XHTML-MP and staying within its bounds keeps us from wandering off into 
dangerous territory. Just like mobile-first RWD keeps us focused on constraints, 
cleanliness, and the tasks at hand, so too does XHTML-MP provide a 
framework within which to create a widely supported mobile website. 





A DOCTYPE (more formally, a document type 
declaration) is a short piece of text at the top of SGML and XML 
documents that informs the client (i.e., browser) which DTD to 
evaluate the document against. 


Browsers perform a kind of “sniffing” (not too different 
from our own user-agent sniffing earlier) on DOCTYPEs. 
While they don’t formally validate documents, they use the 


Too many acronyms. SGML and XML documents? 

DTD? 

HTML is descended from SGML (Standard Generalized 
Markup Language), while XHTML is a kind of XML (and thus 
is more rigidly structured than its X-less kin), so both warrant 

DOCTYPES. 

Document type declarations (DTDs) are formalized definitions 
of what elements (tags, attributes, etc.) are allowed, and where, 
in the type of document they describe. Each specification of 
HTML and XHTML has its own DTD. 

Nominally, associating a document with its intended DTD would 
allow the rendering client to go validate the document against 
that DTD. In real-life web browsers, this doesn’t happen—web 
browsers never actually go out and validate against DTDs. 


DOCTYPE as a hint about what “mode” to assume and how to 
render the content. 

Remember the Opera Mini situation, wherein changing the 
DOCTYPE from HTML5 to XHTML-MP (or XHTML-Basic) 
caused the layout mode to change? That’s a good example of 
this at work. 

Other browsers use the DOCTYPE to determine whether to 
render the content in “standards” mode or in “quirks” mode, a 
backward-compatible, more tolerant mode. 

As of HTML5, all pretense of the browser going out and actually 
looking at a DTD has been dismissed, which is why one ends 
up with the short and simple < ! DOCTYPE html> (no URL 
to a DTD). 
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XWTML-MP "BxfoitA 


This week’s interview: 

Why bother with XHTML-MP? 


Grumpy Mobile Web Developer: You’re looking 
a bit long in the tooth there, XHTML-MP. How 
long until you buy the proverbial farm, or sell it to 
HTML5? 

XHTML-MP 1.2:1m not dead yet! Some people 
think I’ve been put out to pasture, but I’m a useful old 
coot. I keep those older mobile browsers in line. You 
can depend on me. I can help keep you out of trouble. 

GMWD ： What kinds of trouble can you keep me out 
of? 

XHTML-MP 1.2: You want examples? OK. What’s 
the point of having an anchor (<a>) tag with a 
target of _new or —blank if you’re on a mobile 
device? Many mobile browsers won’t let you open a 
new window from a link. So, I don’t support targets. 
Oh, and, frames — those are dangerous mojo. I don’t 
support any frames, not even those fancy-pants 
if rames. 

GMWD ： No if rames? Bah. 

XHTML-MP 1.2 ： Don’t forget that my XHTML-MP 
family — ever since my granddad XHTML-MP 1.0 
was a boy — brings you access keys. 

GMWD ： Access keys? 


XHTML-MP 1.2 ： The entire XHTML-MP lineage 
gives you the access key attribute on anchor (<a>) 
tags. That lets you assign digits 0—9 as shortcut keys 
for those anchors. This can be very nice on phones 
that have numeric keypads. It can also help cut down 
on tedious scrolling. 

GMWD ： So.. .XHTML-MP invented access keys? 

XHTML-MP 1.2: Well, technically that was passed 
down through generations, from WML through 
C-HTML to us. It’s quite an heirloom. 

GMWD ： WML? G-HTML? 

XHTML-MP 1.2:1m not dead yet, but those guys 
sure are. Wireless Markup Language (WML) is 
gradually being phased out entirely. It’s quite different 
than HTML, and my family replaced it as the 
preferred mobile markup variant. 

G-HTML (Compact HTML) was used a lot in Jap an 
in days of yore by DoCoMo. Some people call it 
iMode. You want emoticons? G-HTML has emoji 
in spades. But what it doesn’t have fills volumes: no 
tables, no CSS, no images. Oh, and no color. Ah, yes, 
the good old days. 



Watch it! 


We need to keep our markup tidy. 

WeYe pretty serious about that “choke 
and die” thing. Mobile browsers 
(especially older ones) are less fault- 
tolerant of poorly formed markup than 
their desktop counterparts. You need to be diligent 
about validating your markup — bad markup can cause 
mobile browsers to crash, or，even worse, wretched 
things like making the phone reboot entirely. Ick. 
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right back to basics 



Jim: So, Frank, you think we should use XHTML-MP? 

Frank: It sounds like the safest bet. It looks like we need to keep it 
clean and simple for these older browsers. 

Jim: Is that going to require us to make other changes? 

Frank: It s cool that the XHTML-MP DOCTYPE fixed the floated 
<div>s in Opera Mini, but I’m starting to feel really paranoid about 
floats on those older browsers. I know it’s a bit old-school，but 
I was thinking of using tables to lay out the dashboard 
information. 

Jim: I thought HTML tables were relics of the ’90s, man. 

Frank: Usually I avoid them like the plague, but they’re not, like, 
invalid. And this dashboard stuff does feel like tabular data. I’m just 
not convinced that floated, <div>-based columns are going to work 
reliably in all of the mobile browsers we need to support. 

Jim: Yeah, tables are kind of uncool, but I guess we know that 
they’ll work. Also.. .what about all that CSS we already wrote for the 
mockup? 

Frank: I’m feeling a bit overwhelmed by which HTML tags are 
supported and what kind of CSS support we can depend on. 

I think I’d like to take this one thing at a time. I want to figure out 
which HTML elements are valid and supported on these phones, first. 

So, I’m going to strip out all the CSS for now and add it 
back later. 


118 


Hey, guys. One last thing before you do 
another round of mockups. Some of the feedback 
from Creature Comforts is that it feels like users on 
phones with small screens have to scroll through a 
lot of links to get to their dashboard section... 

Any ideas? 


0 


We can assign access key attributes to the 
links in the #tools <div> to give quicker access 
to the dashboard and the other links. 

*to do —^ 
so rwudh sdlrollih^ 
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Py the way, scrolling sucks 

Not everyone has the luxury of a touchscreen. On many phones, 
the way to navigate through web pages is to use a key or a cursor 
to scroll through the content. In many interfaces, each clickable 
item is highlighted as the users scroll down the page, giving them 
an opportunity to follow the links. The more links and content, 
the more scrolling. 

..thank goodness for access keys 

The access key attribute on the anchor (<a>) tag lets us assign 
a numeric shortcut key to any anchor, reducing the amount of 
potential scrolling for our users. This lets users use the number 
keys on their phones to access links quickly. Access key syntax 
looks like this: 


<a href= M #dashboard" accesskey="1">Your Dashboard</a> 


The access key number assigned to a link doesn’t show up 
automatically, so it’s often handy to use ordered lists (<ol>) 
instead of unordered lists (<ul>) for lists of links (assuming the 
first item in the list uses access key 1). 



hutss keys let usc\rs use 
keys as 


Om last curveball 

OK, there’s something we neglected to tell you. If this 
makes you want to throw up your hands and make 
very irritated noises, we understand. 


XHTML-MP 1.2 was superseded 
by XHTML-Basic in 2008. Sorry. 


XHTML-Basic 1.1 gives you everything that 
XHTML-MP 1.2 did，with a few bonuses. You get 

the target attribute on anchor tags back (not that we’re 
suggesting that you use that, necessarily). You also get a few 
treats like <sup> and <sub>. Bottom line: you don’t lose 
anything you already had in XHTML-MP 1.2. 



Also, XHTML-MP l.z 


dots still wovk 
一 ih mobile 


—just 

b\rowscv-s. 



There are a whole lot of 
confusing markup options 
for mobile devices, but 


we’ll stick to XHTML-Basic 


for the rest of this chapter. 


Sorry we made you go through that, but it was 
for your own good. The mobile web markup 
landscape is complicated, and you should have a 
sense of what’s out there. Now we’ll stop flailing 
around and stick with XHTML-Basic. It’s not too 
hard: we’ll just need to identify what tags aren’t 
supported, and avoid them. And we won’t even 
worry about CSS styling or layout right now. 
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test drive 


Dpil/e 


o 


o 


o 


Convert the document to XHTML-Basic. 

Replace the current DOC TYPE tag with the following: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN' 
"http :// www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd M > 


❹ Remove the CSS for now. 

Delete the CSS <link> tag; we’ll deal with CSS later. 

❺ Convert the <ul> in the #tools <div> to an <ol>. 

This will make numbers show up next to the links and helps 
with the next step. 

o Add accesskey attributes to the <a> tags in the 
#tools <div>. 

See page 119 for syntax hints. 


■mw.com... (3 

Creature Comforts 

Agent Portal 

Welcome back. Dr. Jessica Evans 

1. Your n^shbn^rH 

2. Messages ( 2 j 

3. Vour Schedule 
4 - ggquest Suppi.nc 
5 . Request Pprcn^p^i 
6_ Call HQ 


Type 


Details 


Convert the floating, <div>-based #dashboard <div> to a table. 

Replace the content inside the # dashboard <div> with a table. This 
is a bit tedious, so you can use the ready-bake markup on page 121 (or find this 
code in the extras directory in the chap ter3 folder — it’s in a file called table.txt). 


Ouv pla'm, bu*t 

-fuir>d*tior>al ； modkuf oy \ 
9 iy \ dcv'idc- 


Save your changed file as index.html. 

Save the file as index.html — we’re done testing the mobile redirect 
now, so it’s easier to just use index.html. 


Make suv-c {p keep -the 
养 dashboa\rd <div>. Just 
v-cpbdc its 


tJiereiare no 。 

Dumb Questi 9 ns 


So, I know we’re going all hardcore 
simplified for now, but, after changing 
the DOCTYPE to XHTML-Basic, does 
the mockup we looked at on page 115 still 
work in Opera Mini 4.2? 

Yep! You can see this at http://hf-mw.com/ 
ch3/ex/2a if you are curious. 


Isn’t Opera Mini 4.2 pretty archaic? 
How many people really use that version 
anymore? 

Admittedly, it's not a recent browser. 
But browsers of its vintage absolutely do 
exist out there in the woolly wilds of Mobile 
Web Land. It's a good example of the sort of 
browser with the sort of constraints one runs 
into on older feature phones in, especially, 
emerging markets. 


But didn’t you just say that 
smartphones are now outselling these 
dinosaur feature phones? 

Outselling doesn’t mean outnumbering. 
There are still vast numbers of existing 
older smartphones (not really “smart” by our 
current standards) and feature phones. It will 
be some time before they disappear. 
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a separate mobile site 


> (ZB Q ^ 


汉卿 Ba^ 
T 咖 Ope 


<table> 

<thead> 

<tr> 

<th>Type</th> 

<th>Details</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td><p>Message<br / >Feb 3 8:54PM EST</p></td> 

<td><p><a href= n #">Supply Request #493-C4 Approved</a><br / > 

Hi, Jess, Good news! I wanted to let you know that we were successful in 
tracking down those bottles...</p></td> 

</tr> 

<tr> 

<td><p>Message<br / >Feb 3 1:47PM EST</p></td> 

<td><p><a href= n #">Supply Request #493-C4 Received</a><br / > 

This is an automated message to confirm that your recent Supply Request 
has been received and is in process...</p></td> 

</tr> 

<tr> 

<td><p>Event Scheduled<br / >Feb 3 8:22AM EST</p></td> 

<td><p><a href= n # n >Itinerary 39924 Approved LAX -> DAC</a><br / > 

Your itinerary for event : "Bangladesh Flood Event" has been approved. 
Your calendar has been updated...</p></td> 

</tr> 

<tr> 

<td><p>Personnel Event<br / >Feb 2 9:23PM EST</p></td> 

<td><p><a href= n # n >Re : Personnel Confirmation 03/05 - 03 / 15</axbr / > 
Jessica! Thanks so much for committing to this operation! I think 
Dr. Madling is going too and...</p> 

</td> 

</tr> 

<tr> 

<td colspan= n 2 "xdiv class= n morelink n ><p><a href= n #">More &gt; &gt; </p> 
</a></div></td> 

</tr> 

</tbody> 

</table> 
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element validation 



Which elements are valid where? Use what we’ve learned and your own intuitive sense to figure 
out which tags and attributes are OK in which standards. An element may be OK in more than one 
standard! 


XHTML-MP 1.2 XHTML-Basic 1.1 HTML5 


<font> 







<takle> 







<at£irget=""> 







<SUp> 







<a accesskey= ,nf > 







<u> 







<tboJy> 







<link> 







<strong> 







<Video> 







<!?rame> 








► 加 swers on page 126 . 
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I can’t get access keys to work. 

The Opera Mini simulator doesn’t 
seem to support them, and I don’t have 
a phone with a hard 


We promise that they do work 
on a lot of phones, but you don’t 
have to take our word for it. 

Access keys are actually supported in most 
major desktop browsers, too. 

























































a separate mobile site 


Access keys m action 

If you want to test out the access keys on the mobile markup, you can 
view index.html in your desktop browser. Test out the access keys by using 
the following key combinations: 


Windows 


Chrome or Safari: CTRL-OPT [accesskey] 
FireFox: CRTL- [accesskey] 

Mac 



Chrome: ALT- [accesskey] 

FireFox: ^ALT-SHIFT- [accesskey^ 

Linux 


昏 et some validation 


Cc\rtaih system 

keys o\r 

^Oh-pi0u\rd£iohS dould 


oVC\r these, 
youv mileage may vav-y. 


so 


Remember how we told you that it’s important to use valid markup? 
Let’s not just give that lip service — it’s time to validate the markup in the 
mockup and make sure it’s up to snuff. Let’s head over to the invaluable 
W3C Markup Validator site to check our code. 


•a- 


m: 


Markup Validation Service 


http:// valida"bov-.y/3ov-5 


Validatt by URI 

Validate by URlN 

Validate a document onlin 


Validal* by Direct Input 


More Options 


This validator checks the markup validiW of Web documents in HTML, XI 
content such as RSS/Alom foods or CS§s?tylos*ieots. MobiloOK content 

available. 



moziUa 


The W3C CSS validatof is developed with assis 

convnum 
land help us buik 

Home About.. New\ Docs Help & 


… This »e<v^e 

\k/T^ 0 COPTHKiHI C 19P4-2010WJO»<MIT. 

WW- ANU 5JOF- VWARt LJCCWOPItt RULESAPW,Y. YQ^j 


Validate by URI Validate by File Upload Validate by Direct Input 
Validate by URI 

Validate a document online: 


Address: 


More Options 


Check 


V^U C ， ay\ either upload ike — 

index.html -file (Vahdait by File ^ 

Upload) oy dopy ahd fas-tc i-ts 7^ 
^oh-tchts (V\^ci Ihput). - 〆 
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w3c validation errors 


So, are m good to go? 


e oo 




-Q ， 



Jump To: Notes and Potential Issues Validation Output 





What wcwt wrong? 


Scroll down on the results page to see details about 
the errors. So, what’s the problem here? 


Ak < thead > and <tbody> tags are not supported in XHTML-Basic 
(or XHTML-MP). 

This is likely the most glaring partially unsupported HTML module in 
both XHTML-MP and XHTML-Basic. Tables are OK, but you can’t use 
<thead>, <tbody>, <tfoot>, <col>, or <colgroup>. 


These thv-cc c\rv-ov-s 
扣 c \rcl3icd -to ihc 

Uhsuppoirtcd <ihcad> 

, <tbod y > ^ 

mobile ry»o(ikup HTA/IL . 、 




Line 36, Column 15: element "thead 11 undefined 

<thead > 




> 


Q Line 42, Column 15: element "tbody" undefined 

<tbody > 


Q Line 78, Column 14: end tag for "table" which is not finished 

〈/table > 




TV^C *tW»\rd c\r\ro\r is d side 
{\\c 

i^as ； \-f >wc vewove -tV^osc lay, 

W,ll fee solved. 
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a separate mobile site 


Fix the errors 



There are some improperly nested tags. 

Even seasoned pros make little typo-esque mistakes like this one. That’s one of the 
reasons to use the validator — even if you’re at the top of your game. 


<td colspan="2 M xdiv cl as s="morel ink" > 
<p><a href= M # M >More &gt;&gt;</p></a></div> 
</td> 



Q Line 74, Column 80 end tag for "a" omitted, but OMITTAG NO was specified 

.„lspan e "2 '"xdiv clas3»"moreiink l, ><p><a href ■ "#" ! >More &：gt j </p > </a></div></td> 

Q Line 74, Column 84: end tag for element "a" which is not open 

-,lspan a，T 2 "xdiv class s "morelink^xpxa href &gtf &；gt | </p></a > </div></td> 


Both <^p these cvv-ov-s 
caused by a 
r^ispladcd </a> tag. 

n^cvc -to poWcm. 



4 Line 74, Column 52, start tag was here 

CQlspan» |B 2 ^xdlv class al1l mQrelink l, ><p> < a h r e f ■ n # " >Mo r e </p></ a></dlv><».| 


TWis attually 一十栋 c 

brsM h> us as to 



脅 T D 讀 


Fix the markup problems in the index.html file. 


Remove the <thead>, </thead>, <tbody>, and 
</tbody> tags from the markup. 

Fix the improperly nested tags. Put the </a> tag 
within the paragraph in the . more link <div>. 

Revalidate the updated code with the W3C validator. 



Woo-t! 6\rttY\ suttess. 
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exercise solution 
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OK. Weve got valid code and a basic 
structure. But \Ys looking super bland. 
Can we bring back some CSS? 


































a separate mobile site 


Mobile - savvy CSS 

CSS Mobile Profile 2.0 (GSS-MP) and XHTML-Basic (or XHTML- 

MP) go together like peas and carrots. The GSS-MP standard was 
developed with low- to mid-range phones in mind. 

What do you get in CSS Mobile Profile? Well, most of what you’ve come 
to expect out of GSS2, and even a bit of CSS3. But not everything. 

Sounds simple w theory 

Browsers that implement CSS Mobile Profile 2.0 are supposed to support 
the required properties. But the reality is a bit of a downer. CSS support 
varies quite a bit, and the onus often falls on you, the intrepid developer, 
to test thoroughly and work around quirks. 


In addition, quite a few CSS properties and values are considered optional 
in GSS-MP, meaning browser makers can opt to support them — or not. 



Sounds complicated 
and depressing. How am I 
going to learn this stuff? 


The best way is: less chit-chat, more doing. 

Instead of throwing out a tedious list of supported and 
unsupported CSS properties in CSS Mobile Profile, let’s 
jump in and figure out how to adapt the existing 
CSS to be CSS-MP compliant. 
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marrying xhtml-basic and css mobile profile 



ExeRciSe 


Buckle up. Roll up your sleeves. Batten down the hatches. We’re going to go on a journey here—a 
journey that, if everything goes right, will end with a loving marriage between XHTML-Basic and 
CSS Mobile Profile. We’ll be editing both index.html and styles.css. 


Put the <link> tag back in index.html. 

We’re going to want to start using CSS again, so we need that <link> tag. 



<head> 

<title>Creature Comforts Agent Porta1</title> 

<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 
<meta name="viewport" content= M width=device-width f initial-scale=l , 



index.html 


Lets refactor styles.css to be valid CSS Mobile Profile. 

The background-image 


and background-repeat 
properties are supported in 
GSS-MP, but having a big 
header with a background 
image wastes a lot of space. 
Let’s just get rid of the 
background image. 


b 此 kyouhd—positioh values ih 

ahd pixels av-c hot 一 
supposed ih CSS-/WP, so wc^d 

have -to this i-p wc 

keeping the ba^kgv-ouhd 
But ^cVc 

*,s ^ su ?? 0，rt 

V,ad4ou^6olo, -.s,-t assumed. 


Everything else in this CSS 
so far is compliant...onward! 


padding : 0 ; 
margin : 0; 

} 

body { 

font-family: "Helvetica" , ， ’ Arial n , san-serif ; 

font-size : 100%; 
width : 100%; 

background-color : #f3ffc2; 
background-image : ~url ( 1 cows• jpg 1 ); 

background^repeat : rrorepeat / 

知 background-position : ~~~Qpx; 


P i 

font-size : .95em; 

margin : 0.25em 0; 

} 

hi, h2 r h3, h4, h5 { 


font-family: "Times New Roman ", serif; 
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a separate mobile site 


h3 


font-style : italic; 
font-weight : 100; 
font-size : 1.15em; 



styles.css 


ol 


width : 100%; 


a 


text-decoration 
color : # 0 9 6 c 9 f; 


none 


Smdc v/c uscd ^ ,S . 
CSS, y/c Aa 呼 d o 吖 <ul> 
^ <ol>. TV^csc yules 

JUccd ^ ^? daicd 

{p that 


.header~{- 
height : ~150px; 

十 

#tools ol { 

list-style-type : none; 

} 

#tools ol li a { 

-webkit-border-radius : ~5px; 

-moz-border-radius : ~~5px; 

border-radius : ~5px; 

display : block; 
height : 1.lem; 
width : 94 %; 

background-color : # f f f ; 
margin : 3%; 

border : lpx solid #ccc; 
text-align : center; 
padding : .6em 0; 

} 

.greeting { 

border : lpx dashed #10508c; 
border-width : lpx 0; 

} 

^dashboard { 

-webkit-border-radius : ~5px; 

-moz-border-radius : ~~5px; 

border-radius : ~5px; 
background-color : # f f f ; 
border : lpx solid #ccc; 
margin : lem 3%; 
padding : .5em 0; 

width : 94%; 



These p\ropc\rtics -fco 

irouhded fi.o\Thcv*s 

invalid ih CSS-/1/JP, 

rwost o-p those oldcv- 
b\rowsc\rs doh’t supfov-t 
therh, anyway. Delete 
these -Pv-orw -the CSS. 



Continues over the pa^e. 
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make sure to sign the pre-nup 



Back 


to index.html ： add some classes to the table elements. 




<tr class="even n > 

<td class= M event event meta"><p><strong>Message</strongxbr 


/> 

Feb 3 8 : 54PM EST</p> 
</td> 


v^oUot! A??'V 

dlasscs 

o-bV^cv 細 e vov/s, too. 


But altcv-hatc 
tv-.cvch with tv- odd. 


<td class= M event"><p><a href="#"><strong>Supply Request #4 93- 
C4 Approved</strongx/axbr / > 

Hi, Jess, Good news ! 工 wanted to let you know that we were 
successful in tracking down those bottles...</p></td> 


</tr> 


And now back to styles.css ： adapt styles to apply to the 
tabular markup. 




index.html 


We switched from <div>s to tables for layout. We’ll want to get rid 
of some properties that no longer make sense, and make a few edits to 


others. 



"these 


^dashboard td.event { 

border : lpx dashed #ddd; 
border-width : lpx 000; 
margin : .5em 0; 

padding : 0.5em 0; 
width : ~ 100%; 

clear : ~both; 
overflow : ~hidden; 


^dashboard .odd { 

background-color : # f f f ; 

} 

^dashboard .even { 

background-color : #eee; 


No -float 

some ^^ 
adjus-trucht "to 

七 li 3hd rv\d\r^ihs. 


^dashboard td.event_meta { 



styles.css 


We’re not floating content 
anymore. In addition, 
browsers that implement 
CSS-MP are only required 
to implement the “auto” 
value of overflow; 
everything else is optional. 
You can’t rely on overflow 
in CSS-MP.' 
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a separate mobile site 



Add this CSS rule to styles.css... 



^dashboard table { 
border-collapse : 
width : 100%; 



Add this hew CSS 

ih 

the s-t ylcs.^SS -pile). 


styles.css 


...and remove some unneeded rules. 

Find and eliminate the style rules: 


Delete dll O-P "these/ 



^dashboard 

#dashboard 

^dashboard 

^dashboard 

^dashboard 


div 

.event_time 
.event—details 
.event_subject 
.event—summary 



styles.css 



Fix the #status_message <div>. 


A^d, -Pihally, yt 
Hd of these. 




#status_message { 

background-color : #f8flb2; 
padding : 0.25 em; 
line-height : 1.3em; 
border : lpx solid #ccc; 
border-width : lpx 0; 
height : ~~7 Opx; 
overflow : ~scroll; 




styles.css 


Beware of using the overflow property! 

overflow ： scroll is totally taboo in Mobile Land. It's generally 
xT.r not supported on any platform, and is an interactive ickiness. 

* The behavior of the overflow property in browsers that implement 
CSS-MP is varied—the only value that they are required to support is auto. 

Avoid relying on overflow whenever possible. 



Save the files, and youre done! 


you are here ► 


131 




















so long, buttons 


Hmmm...somethmg is missing 


Take a look at this screenshot from the Opera Mini 4.2 simulator of the 
current mockup. Notice anything? We’ve lost the list numbering on our 
<ol> — and those numbers indicated the access keys. Uh oh. 

Whcre'd the numbers go? 

The numbers are still “there,” but we’ve applied CSS that makes the 
< 1 i > elements look like buttons that span the full width of the window. 
So the numbers are off to the left of the visible content. 

Normally, to “bring them back,” we’d use something like: 


fiow the mockup 
^u\r\rChtly looks: 
妁 。 scctss keys. 




#tools ol { 

list-style-position : insider- 


list-style-position : inside brings the numbers “inside” the 
<li> element and renders them (in this case) next to the contents of 
the <li> (our links). Sounds about right, huh? 

Unfortunately, list-style-position is not supported in 
CSS-MP So we have a problem. Maybe we’ll need to convert the 
links into a simple list of links, instead of the buttony look we have now. 
Then the numbers will show up again. 


Creature Comforts Agent Por.,, 


Creature Comforts 
Agent Portal 

Welcome back. Dr. Jessica 
Evans 




Your Dashboard 
Messages (2) 
Your Schedule 
Request Supplies 
Request Personnel 


■ Menu 

11:04 

Back! 

• 

OK 

• 

i 

2 ABC 

3def 

4ghi 

5 JKL 

6 MNO 

7 PQRS 

8tuv 

9wxyz 

本 

0 

# 




Pyc bye, buttons 


We can regain the numbered list by replacing the CSS rules for 
#tools ol and #tools ol li with this: 


Creature Comforts 


#tools ol { 

margin : 0.5em 1.5em; 


ff ^ cxisti h a 

CSS -fov this hew Css... 

P.S. TKc \>ddd'm^ *fov 

elements W Kas set *to So d 
r\tt& bo add a bi*t o-f badk Kcvc 
•fco y>umbcv"S oy>*to visible fay. 


r 


.ouv <o\>s numbers 

bd 乙 k. 


Agent Portal 

Welcome back. Dr. Jesstca 
Evans 

1. Your Dashboard 

2. Messages (21 

3. Your Schedule 

4. Request Supplies 

5. Request Personnel 

6. CaEl HQ 


However, when Creature 
Comforts reviewed this 
change to the layout... 
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a separate mobile site 


The button look is sorely missed! 



Hmmm...rd really prefer it 
if those utility links looked like 
buttons and not just links. 


Creature Comforts has become 
attached to the button look and 
wants it back. 

The only way to accomplish this with valid 
GSS-MP is to convert the list back to a 
<ul>, add the numbers to the content itself, 
and update the CSS style rules. 



DRive 


Ahhh, ^ompiromises. "That’s 

"the mobile web way. 


Change the CSS selectors in the styles.css file and convert the <ol> to a 
<ul> in index.html. Don’t forget to add the access key numbers to the text 
content of the links, too! 


styles .^ss 

Cha 哼 *0^ <0 卜 batk *to a 

<\j\> a^dm m 

<div id= M tools"> 

<ul> 

<li><a href ： 


#tools ul 


PiA 七 CSS was used 

^=*too|s ol OY\ pay 12-^) 


#tools ul li a 


used 


pu 七七 he CSS pv-cviously 
-rov- 养 "tools ol |i a hcv-c- 


^dashboard" accesskey= n l M >l. Your Dashboard</a></li> 

Messages (2)</a></li> 

Your Schedule</a></li> 

Request Supplies</a></li> 

Request Personnel</a></li> 

Call HQ</a></li> 


<li><a 

href= ▼” 

tn accesskey= 

="2 

”>2. 

<li><a 

href= ▼” 

tn accesskey= 

="3 

”>3. 

<li><a 

href= ▼” 

tn accesskey= 

=" 4 

”>4. 

<li><a 

href= ▼” 

tn accesskey= 

="5 

，， >5. 

<li><a 

href= ▼” 

tn accesskey= 

="6 

，， >6. 


</ul> 

</div> 



index.html 
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the new site pushes creature comforts' buttons 


ftreat success! 





mature Comforts Agent Porta 


com/ch3/... 


题 http:"www.hf-_.co m/ .二 

Creature Comforts 

i.vour Dashboard — | Creature Comforts 

2. Messages (2) 

3 Your Schedule 

4. Request Supp“ es 

5. Request Personnel 

6. Call HQ 

pers _Uo 冗 curren tly 

r s s 二工 


Creature Comforts Agent Por" 


Creature Comforts 
.Agent Portal 

Welcome back^ DrJessVca 
. Evans 


L Your Dashboard 


2』 Messages (2) 


Agent Portal 

JVelcome back, Dr. Jessica Evans 


Vour Schedule 


4 - Request Supplies 


_5. Request Personnpf 



擊 


1. Your Dashboard 

2, Messages (2) 

3 - Your Schedule 


unsc 
effort. 


Event 


Details 



4 SHJ 

7 PQRS 

本 


Looks -f mc OY\ V>C>MCV- 
smavtfho^cs, like *th*is 

/Wvoid Kc^us S. 


OK 

2 ABC 

5jkl 

Stuv 

0 


3 DEF 
6 UNO 
9WXV2 

# 






BULLET POINTS 


t & ^/r C ihe A 

/h+-mw.^om/^hVcx/^. 


It’s a big world, and there are billions (yep) of 
mobile phones. Not all of them are bleeding-edge 
smartphones, and sometimes you have to make your 
website or web app work with those phones. 

There are real-life circumstances: older systems, 
recalcitrant clients, or specific projects that make 
having a totally separate mobile website necessary. 


Some older mobile browsers (and current, lower-end 
mobile devices) implement different standards for 
HTML and CSS. 

XHTML Mobile Profile (XHTML-MP) is a 
mobile-specific standard used by many mobile 
browsers. It is similar to XHTML, but does not support 
everything that XHTML does. 


■ One of the ways to route mobile traffic to a 
mobile-specific website is to use server-side mobile 
device detection and redirection. 

■ User-agent sniffing is a popular technique for 
evaluating whether an incoming request is from a 
mobile browser. 

■ User-agent sniffing examines the User-Agent 
header that browsers send as part of each HTTP 
request. Users can “spoof their user agent— 
knowingly or not. This is a weakness of this method. 


■ Similarly, CSS Mobile Profile (CSS-MP) is a 
mobile-specific flavor of CSS. 

■ XHTML-MP was superseded by XHTML-Basic 
1 . 1 , which is almost the same except for a few new 
supported elements. 

■ It’s important to choose the appropriate doctype 
for your mobile web project and pay attention to 
keeping your markup valid— bad code can make 
phones behave very badly. 
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a separate mobile site 


tJiereiare no ^ 

Dumb Questi9ns 


There’s XHTML-Basic/XHTML-MP instead of HTML, 
and CSS-Mobile Profile instead of full-on CSS2. Is there an 
equivalent mobile flavor of JavaScript for mobile devices? 

Yes, there is a mobile-specific JavaScript called ECMAScript 
Mobile Profile, but you can’t rely on it. We’ve worked with phones 
where the JavaScript cannot change anything on the page once it 
is loaded, which means most of the things you use JavaScript for 
cannot be done. So if you’re targeting old phones, you’re probably 
better off not relying on JavaScript. 

What about Wireless CSS? 

Wireless CSS is a standard quite similar to CSS-Mobile Profile, 
but with support for fewer properties. It's kind of on its way out, and 
we don’t see any reason to use it instead of CSS-MP. 

If you use user-agent sniffing to route mobile traffic, and 
you misidentify a user’s browser either because she is spoofing 
her user agent or because you’re just...wrong, couldn’t she end 
up getting redirected and stuck on the mobile version of the site, 
unable to escape back to the full site? 

^\^lWell spotted! This is important! In a real-life situation, you would 
want to provide an “escape hatch,” often in the form of a link back to 
the desktop site. 

The link on its own isn’t enough—you need to let your redirection 
script know that the user wants the desktop site. You can accomplish 
this by setting a cookie indicating this preference and not redirecting 
browsers that have that cookie set. 


What happens if I just can’t get my site to do what I 
want in a way that is perfectly valid XHTML-Basic or CSS-MP 
or whatever? Does the sky fall? Do phones around the world 
crash? 

Being successful on the mobile web often means making 
compromises and trade-offs. While writing valid code is something to 
shoot for, it’s not always 1 00% feasible. But knowing the rules before 
you break them is always a good motto to live by. 

Do I have to use XHTML-Basic every time I want to 
support a lot of mobile browsers? It feels constrained. 

We have to pull out the classic mobile web answer for this: “it 
depends.” In Creature Comforts’ case, there were a lot of older, less 
full-featured phones we needed to support. Our goals were to get a 
server-side data service to render well on as many feature phones as 
possible. 

Using HTML5 in many cases is a reasonable approach, even on 
older phones. But we wanted to show you the kinds of things you 
need to be aware of when targeting older devices. 

You neglected to do so on page 127, but I do want to see an 
exhaustive list of supported and nonsupported properties in 
CSS-MP. 

Hey, you’re in luck: the CSS Mobile Profile 2.0 spec happens to 
be a rather quick and easy read. You can find it at 
http://www.w3.org/TR/css-mobile. 


Hey, developer types! How could we support users who want 
the desktop version instead? Can you think of what would 
be needed to add a link from the mobile to the desktop site, 
and what modifications you’d need to make to redirect.php to 
write and check for a cookie to store the user’s preference? 


|Vs dool *to s*tvar^d 
usev-s oy\ a 一 dovm 

mobile s*i*tc i-f *tKcy ； d 
pvc-fcv* *to esdape *to 
dcsk*tof vcv-s*ior>. 
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4 deciding wJipm ±o support 





參 What devices 

should we support?^ 



Well, sure your ’ 

site doesn’t work on this i 

phone, but you could have left 
out the part about ''out-of-date 
technophobe Luddites’’... ■ 


There aren’t enough hours in the day to test on every device. 

You have to draw the line somewhere on what you can support. But how do you 
decide? What about people using devices you can’t test on — are they left out in the 
cold? Or is it possible to build your web pages in a way that will reach people on devices 
you’ve never heard of? In this chapter, we’re going to mix a magic concoction of project 
requirements and audience usage to help us figure out what devices we support 
and what to do about those we don’t. 
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all about the compromises 


How do you know where to draw the liwc? 


Every project is a series of compromises. 
Stakeholder desires. User experience feedback. 
Search engine optimization. Figuring out what 
matters for your project can seem like magic to 
people who aren’t in the trenches with you. 

Deciding what devices you care about is 
similar. You take criteria and priorities, apply 
some brain power, sprinkle in a little magical 
inspiration, and you come up with a list of 
devices that are key to your success. 
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deciding whom to support 


Step away from the keyboard for a second 

We’ve tried to keep everything grounded and hands on so far, but we’ve reached 
that point in the movie where the actor stares off into space and contemplates a 
tough problem. Suddenly, inspiration hits and the actor leaps into action. 


The difference here is that you’re the actor. You already have all of the tools you 
need to decide where to draw the line. 

But you’re not going to find that inspiration at the keyboard, so we’ll take a brief 
interlude from building stuff to talk about the abstract stuff that turns criteria and 
priorities into a list of devices you support. We’re going to help focus your brain a 
little and then get out of the way. 


Don’t worry, we’ll get back to building stuff soon. The best directors know that all 
they need to do is give their actors some guidance and let the actors act. 

Whaf s this line we weed to draw? 

Supporting every device ever made is a noble goal. Testing on every device ever 
made is a sure-fire path to losing your mind. You can hope to support as many 
people as possible, but to keep your sanity, you’re going to have to know the answer 
to three questions. 


o 

o 

❺ 


What devices do we support? 

Which devices or types of devices are you going to test 
your pages on to make sure they work as intended? 

What happens to devices we DON’T support? 

What can you do to make sure devices that you don’t 
test on are still able to use your site? 

What happens to devices we CANT support? 

What message do you give people whose devices aren’t 
up to snuff? 






Can you think of some differences between 
devices you don’t support and those that you 
can’t support? 
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to support or not to support 


Things you don't support vs. 
those you can't support 

Once you know what you are going to support, everything else is 
something you don’t support. So why make a distinction between 
what you don’t support and what you can’t support? 

Although you don’t explicitly support a device, that doesn’t mean 
what you’ve built won’t work on that device. If you build your 
web page using well-formed, semantic HTML and progressive 
enhancement, your page will be accessible by many more 
browsers and devices than you can guarantee that it will work on. 

But sometimes a browser is so old and feeble that you simply can’t 
support it. 


For example, if you’re selling shoes online, you need to use 
HTTPS to keep credit card information safe. Some old phones 
don’t support HTTPS. When that happens, the best thing you 
can do is tell the person that she can’t buy shoes on her phone. 




Pow't be a meanie about it 

If you can’t support someone’s browser, be nice 
about it. He may not have the latest phone in 
his pocket, but he may have access to a better 
browser somewhere else. 

Besides, no one likes to be told his phone is a 
jalopy. Be gracious to your guests. 



Don’t exclude unsupported browsers. 

Just because you can’t verify that your pages 
will work in a browser doesn’t mean you 
should exclude people using that browser. If 
you build the site using semantic markup, it 
will work in many browsers — including ones you couldn’t 
test on and that were not critical to your project. 


Watch it! 
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deciding whom to support 


I understand not being able to support v 

really old phones that don’t have HTTPS, but I 
thought if you delivered a basic HTML document 
and then progressively enhanced it with CSS 
and JavaScript, it would work everywhere. 


You’re right. In many cases, progressive 
enhancement means you can support 
hundreds of different browsers. But your 
mileage may vary. 

Starting with basic HTML and progressively enhancing 
the document should be the starting point for most 
web pages. Browsers with advanced features get 
enhancements like rounded corners and gradients. 

However, the minimum requirements for a site or app 
may be higher than basic HTML can provide. A video 
game may require WebGL, a graphics library, for 
game play. There is no content if the browser doesn’t 
support WebGL — that is, until a couple of years from 



now when you can progressively enhance from WebGL 



As they say, you have to know the rules before you 
know when to break them. You should use progressive 
enhancement from basic HTML unless you have a really 
good reason why it won’t work. 

And even then, a basic HTML document that said, 
u Sorry, this game requires WebGL support to play” would 
be a nice starting point upon which to build the game. 
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who, why, what, where, and when 


Ask questions about your project 

It might sound like we’re teaching you to suck eggs here, but the 
first step toward figuring out where to draw the line is to think 
about your project. Who is your audience? What functionality is 
core? What features are optional? What is the best experience? 


Hmm...the travel app Tm 
working on needs to know 
where someone is to work. 
What if that person^ phone 
doesn’t have GPS? Would zip 
code be accurate enough? 



The cheapest thing on this 
site costs $10,000. Might as well 
call it Filthy Rich 'R' Us. Can we 
assume most customers will have 
recent smartphones? 


O 




The sales team needs to show the app to 
potential customers, but standard issue for 
salespeople is a BlackBerry 4.5 phone. How can 
we show off the app on such an old device 
and still make it look good on iPhones? 
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deciding whom to support 



Our Funny Cat Video site 
will be great on mobile, but only if the 
phone supports video. Which phones 
support video and have good data plans 
or WiFi ability? 


Were getting ready to expand into 
Japan and South Korea. Do they use the 
same phones as we do? I heard Japan has 
a lot of phones not available elsewhere. 



Our newest game, Enraged Avians, 
is graphically intense. We already know the 
browser will need to support WebGL, but now 
were wondering if some phones will be too slow 
even if they support WebGL. 
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magic factors 


Ingredients for your magic mobile potion 


When you ask questions about your project, you’re starting to suss out the factors 
that can help you figure out which devices matter. Who is your audience and what 
is it likely to use? What are must-haves versus nice-to-have features? 

This is where the magic comes in. Mix these factors together into a magic potion 
that tells you what devices you need to support. 




Device capabilities 
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deciding whom to support 


Praw from your cupboard of tools and data 


What goes into audience usage? Dig into your jar of 
web analytics to see what your current customers are 
using. Expanding to a new geography? Pull out data 
on the top phones in those countries to see what the 
cool phone is in Singapore. 

be v/cb 

0 -f tus*tomcv- usay. 


Bcwavc o-f a^aly-tids i-f 
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case studies exercise 



V 


Ex^f(ciSe 


Time to put your magician’s hat on and work 
some magic. For each case study, build a 
requirements list based on what the app is 
trying to accomplish and the target audience. 

The list should include must-have 
requirements and nice-to-have features. 


Heve’s ouv- lis*t o-f 
vc e UA»v*cw'C^*bs based 
ov\ -tV^c 

m tWis cast study- 


ftp 












Case Study 

A Politician wants an edge in a 
close election. She would like an 
app for volunteers to use when 
they go door-to-door to encourage 
people to vote. The app will 
provide the address of people to 

contact—with a map if possible— 

and what questions the volunteer 
should ask. Volunteers are in 
short supply，so she would like the 
app to support whatever phone 
they happen to own. 





Example 

Case Study 

Mo Better Museums is building an app that allows 
museum visitors to point their phone cameras at 
a piece of art and see an overlay containing more 
information about the piece. It can tell which piece 
of art is being viewed based on the phone’s location. 
Phone reception in museums can be spotty. 


^ Requirements: 

戈 * • Must have: sufpo\rt Java£^v-ift 


• Must ^ave ： atttss -to camera 


fti • /\/ius*t have ： addess {p loda*tio^ 
- 

S — 一 息 … dc 



Require 


ments: 



t 


146 Chapter 4 



















deciding whom to support 



Case Study 

Bowling Boxers is the video¬ 
game generation's version of 
Dogs Playing Poker. You control 
a boxer, based on a dog in the 
famous C. M. Coolidge paintings, 
that is pitted in a fierce back-alley 
bowling competition. Rendering 
the characters and all of the 
insane lane action pushes the 
limits of many phones. 



I 


: 


Which requirements are 
minimum bars, and which 
can be supported via 
progressive enhancement? 
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requirements lists 



Don’t you hate it when someone tells 
you there is no right answer? Yeah, well, 
sorry about that. There are no right 
answers when it comes to requirements. 

So don’t fret if you have a different 
answer for these case studies. Your 
experience may give you a requirement 
that we’ve missed. Trust your 
experience and instincts. 


Ca^cv-a autss is a 竹 

1 A^C API- So ^ ov\ ly 

la 七 es 七 vcvs'ioh o^c A^dvoid 
pav-t'ially su\>\>ovb »*t- 



EXAMPLE 

Case Study 

Mo Better Museums is building an app that allows 
museum visitors to point their phone cameras at 
a piece of art and see an overlay containing more 
information about the piece. It can tell which piece 
of art is being viewed based on the phone’s location. 
Phone reception in museums can be spotty. 

Requirements: 

• Must Kave ： su\>po\rt JavaSd\r*»\>*t 








• Mus-t have ： addcss -to 

• /\/lus*t have ： addcss -bo loda*t*»o^ 

• *bo V>avc: su\>\>o\rt mode 


Case Study 

A Politician wants an edge in a 
close election. She would like an 
app for volunteers to use when 
they go door-to-door to encourage 
people to vote. The app will 
provide the address of people to 

contact—with a map if possible— 

and what questions the volunteer 
should ask. Volunteers are in 
short supply，so she would like the 
app to support whatever phone 
they happen to own. 


Requirements: 

^Ohhc^-tioh 

• io have ： ability io 

dh ^y 丨，“一 p 

• ， have: 

^ maps 



Mite! Some 
w opportunities 
-fov fvoycss'ivc 
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deciding whom to support 



Case Study 

Bowling Boxers is the video¬ 
game generation's version of 
Dogs Playing Poker. You control 
a boxer, based on a dog in the 
famous C. M. Coolidge paintings, 
that is pitted in a fierce back-alley 
bowling competition. Rendering 
the characters and all of the 
insane lane action pushes the 
limits of many phones. 


Requirements: 


1 心 蚨 have : suppov-t JavaS^ip-t 
have : support 

处 ! -fast CPU 3hd 6i?\A t OY 

the will su-P^V 


c ase StU u^c notoed an /p 
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\ncvease ^ ^ 一一 
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一⑽ TrSaVs^e 砂 ; f 二一以 
vevs'\o^° p ^ones y ' sl0 ^evs ^ 

lob easeasV^P e . v 

p\ 3 iC© 


ovdevs on 



Re quirein ents; 

.^：T 

’ HT ^ ^ ^ koui 

• 从 《 ‘ ，咖 


} ^elax 


Iteration helps you 
uncover extra 
requirements. 


If you were to pull 
back the curtain on most mobile 
projects, you’d find that the people who 
made the site were uncertain about what 
devices they needed to support. They 
made the best guess they could and then 
iterated on it until they perfected the site. 
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detective work 


How do I kwow my customers 
have the right stuff? 



Now that I have 
a device requirements list, 
how do I know if a specific 
phone fits my criteria? 


Great question. There are two main 
methods: server-side device detection 
and client-side feature detection. 

We’re going to look at device-detection 
databases in the next chapter. 

It sounds like you’re ready for this interlude to end 




2 


& 


and get back to building things. We told you this 


wouldn’t take long. 


Now get ready to roll up your sleeves again and dig 
into the crazy world of device databases and the bane 
of web developers everywhere: user-agent strings. 


Don’t worry. It isn’t as bad as it sounds. By the end 
of the next chapter, you’ll be bossing those evil user- 
agent strings around. 


BULLET POINTS - 

■ Every project draws the line somewhere on which 
devices it supports. 

■ Knowing where to draw the line is a combination of 

experience, research, and gut instinct. 

■ There is a difference between devices you don ! t 
support and those you can’f support because 
they lack critical features that make it impossible to 
use your site. 

■ Look at your project requirements and your target 
audience to help decide where to draw the line. 


■ Progressive enhancement should be the default 
approach. This will make your site work on many 
more devices than you can officially support. 

■ Unless you know for certain that you cannot 
support a device, you shouldn’t exclude it. New 

browsers show up all the time. Give them a chance 
to prove they’re up to snuff. 

■ Don’t let mobile’s complexity overwhelm you. You 
already have all of the tools you need to know 
where to draw the line. Trust your experience 
and instincts. 
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5 deVice dcttakcises and classes 



•Get with the group ^ 


Setting the bar for the devices we support doesn’t take care 

Of a few nagging issues. How do we find out enough stuff about our users’ 
mobile browsers to know if they measure up before we deliver content to them? How do 
we avoid only building (lame) content for the lowest common denominator? And how do 
we organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enter 
the realm of device capabilities, learn to access them with a device database, and, 
finally, discover how to group them into device classes so that we can keep our sanity. 


Uh, when you said 
you were going to take a 
peek behind the curtain, I 
didn’t think you meant this one... 
It is possible to know a little too 
much about a user, you know... 
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time to hit the panic button 


A panic button for freaked - out students 

Acedlt! Test Prep hangs its hat on superior customer service. Its 
goal is to make each and every one of its students — who are hard 
at work nerve-rackingly studying for career- or academic-advancing 
standardized tests and certifications — feel like they have a one-on-one 
connection with tutors who are experts in their subjects. 

Sometimes students panic. That’s why Acedlt! wants to create a page 
on its website specially attuned to its customers who are on the edge. 

It’s called the I’m Freaking Out! page, and its goal is simple: connect 
the customer with an on-call tutor right away. 



WouldiVt it be cool if a freaked-out 
user on a mobile browser could see a big 
red panic button that he could press and 
place a phone call right away? 


m 


Freaking Out! 


Pre-test late-night jitters? A math 
problem that just won’t budge? Our 
expert on-call tutors are standing by 
to help you through tough moments. 


CBO of Mcdli! 
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device databases and classes 


The button is for mobile phones only 


Desktop browsers can’t make phone calls, 
so the big, red panic button metaphor is 
kind of lost there. Steve only wants the 
button to show up on mobile phones. 



Put how do we know someone is on a mobile phone? 



Frank: We might be able to do this with CSS media 
queries based on the window width of the browser. 

Jill ： Not in this case, I don’t think. Just because a 
window is narrow in width doesn’t mean the browser 
is on an actual mobile phone. 


Frank: Right, I guess the panic button would end up 
showing up on narrow windows and tablets and stuff 
if we used a width-based media query. Not all mobile 
devices are phones, either. But what other options do 
we have? 

Jill: Ideally, we’d have some way of getting 
information about the user’s browser and device that 
is specific enough to give us hints as to whether it’s a 
mobile phone, not just a device with low resolution 
or a narrow screen. 


wihdow 

docsh 

mobile phohc/ 
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a little black book of browser data 


Mobile device data sources to the rescue 

Mobile device databases contain detailed information about 
the browser, platform, and hardware features of mobile devices and 
their browsers. By querying the data set with a uniquely identifying 
key — generally a user-agent string~we can get tons of attributes 
about that device and its browser. 



A devil’s birowsev- makes 
3 "to the sevvev". 


乙 <^"bihs daia about 

devils ahd "theiv- h 


|r\-fovw\a*tioir\ is available 
about dcv^cs V^av-dwav-c, 
o\rw\, 3 r\d k\roy/scv*- 



So(Wc APU 咖 k a 

*m i\\t dcvkc database 

*t^c tu\rwt use 矿 a^b. 





browser = Safari 


A suUssU gives us 

5,1 

3bout the devifie^ 

HTML table support = yes J 


L css rounded corners = webkit 


built-in camera = yes 


J 


resolution width = 320px 



c 


has cellular radio = yes 



Armed with this 
data, you can 
adapt content 
based on a device’s 
characteristics. 


) d, d) 
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device databases and classes 


Meet WURFL 

WURFL (Wireless Universal Resource FiLe, usually 
pronounced “wuhr-full”）is an open source device 
database with an enormous amount of information 
about the specific capabilities of mobile devices and 
their browsers. 

Recently, the longtime maintainers of the WURFL 
project started a company called ScientiaMobile to 
provide commercial support for WURFL. 

WURFL tracks details about mobile device specifics 
from ringtone formats to physical screen sizes. 

Not all of WURFL’s capabilities are of interest to 
us web developers, but you’ll find some real, useful 
gems in there. 



A device is not a platform is 
not a browser. 

There is no good word meaning ce a 
device’s hardware characteristics 
combined with its platform and 


OS melded with its browser . w There really 
maybe should be. WURFL’s notion of a device 
is a combination of all three, and contains 
information about hardware, OS, and browser. 


Terminology makes it difficult to be clear. We J re 
guilty, too, so keep in mind that our use of the 
shorthand word device likely carries some of 
the connotations of browser, hardware, and OS. 



Go out and try it yourself! The ScientiaMobile explorer lets you 
interact with Tera-WURFL data in a web browser. 


o Go to http://www.tera-wurfl.com/explore in a 
mobile browser. 

❺ Visit the See my capabilities section and browse the 
capabilities it returns for your mobile device and browser. 


TV^C ocplow -to uscd 

州 oWc 1^ you v •⑸七二办 

a dcsk^ Wov/scv-, a vandom mobile 
dcvitc Will fee seized W 70UV 
- ?' casuyrC， 


You can also visit the explorer in a desktop browser 
and enter in any user-agent string you’d like to find 
capabilities for. This can be a quick and handy way to 
look up device capabilities for a known user agent. 


.uLAT&T 3:44 PM 


mobile browser 


nokia_feature_pack 


device os 


nokia series 


has_qwerty_keyboard 


pointing method 


mobile browser version 


is_tablet 


nokia edition 


uaprof 



o 


Safari 


iPhone OS 


touchscreen 



Some ^dfabilrties listed m 

oy\ By\ iPhone 午 . 
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wurfl out loud 


WURFL awd its capabilities 



Device who? Capabilities 
what? What does WURFL 
actually c/o for me? 


WURFL provides information about 
mobile devices，their platforms，and their 
browsers as a set of capabilities. You 
can use this information to adapt your 
web content accordingly. 

There are currently over 500 capabilities that WURFL 
tracks, grouped into a couple dozen or so categories like 
css (can this browser support rounded corners? What 
about background images?) and playback (what kinds of 
media can this device play?). 

Device data is maintained in a large, single XML file that 
is regularly updated. The latest version is made available 


on the project’s Sourceforge page. < - ^ URL 

There's wore thaw one flavor of WURFL ,s 

ScientiaMobile’s explorer is based on a particular 
implementation of WURFL (the Database Edition, also 
known as Tern- WURFL) that keeps WURFL device data 
in a database instead in a flat XML file. Tera-WURFL 
is intended to be set up as a web service or PHP library 
that mobile-oriented websites can query to get device 
information for user-agent strings. 


There are many different APIs and implementations of 
WURFL, but all have one thing in common: that big ol’ 
WURFL XML file with all of the mobile device data. 
The full WURFL experience is a combination of the 
WURFL data file (XML), the way the data is stored, and 
an API to interact with it. 


Well be using the PHP API 

There are WURFL APIs for a number of major 
programming languages. We’ll be using the PHP API 
and file-based data. 
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device databases and classes 
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WURFL works well because of several 
factors in its favor (one of which is that 
it doesn’t track every single user agent). 

WURFL 5 s developer community is constantly 
contributing to the data source, meaning it isn’t left 
to some poor guy alone in a dim cubicle somewhere 
trying to track down every new device and browser 
on the market — not just a thankless task, but likely 
impossible. 

WURFL’s various APIs’ algorithms are clever when 
performing matches on user agents. It also doesn’t 
hurt that WURFL has been around a while, has 
a proven track record, and has been used by (and 
contributed to) some pretty major web players (ever 
heard of Facebook?). 


And, of course, if WURFL doesn’t meet your needs, 
there are other device databases such as DeviceAtlas, 
DetectRight, and Mobile Aware. What makes sense 
for your project depends on your needs, budget, and 
licensing requirements. 
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there are no dumb questions 



Dumb Quest! 


9ns 


What is ScientiaMobile? 

ScientiaMobile is a company founded in 2011 by Steve 
Kamerman, Luca Passani, and Krishna Guda. Luca has 
been one of the maintainers of the open source WURFL 
project since he and Andrea Trasatti started WURFL in 2001. 
Steve created Tera-WURFL, which has become the WURFL 
Database Edition. 

Is WURFL free? Do I have to pay for it? 

It depends. WURFL is technically open source. The 
WURFL API is available under the Affero General Public 
License v3 (AGPL), which is an open source license. The 
WURFL XML database has a restricted license that only 
allows it to be used with the WURFL API. 

So, if you can comply with the AGPL restrictions, you don’t 
have to pay anything. But AGPL is more aggressive than its 
GPL cousin. With AGPL, running the software on a server 
counts as a distribution, which triggers provisions requiring 
you to open source any derivative work. 

If AGPL doesn’t work for you (and, in many cases, it probably 
won’t), ScientiaMobile will sell you a commercial license. 

^^•If I integrate WURFL with (insert your favorite open 
source solution here) and build a site on top of it, do I 
have to open source the whole site? 

Short answer: buy a commercial license or talk to a 
lawyer. ScientiaMobile.com also has a licensing FAQ. 

^^,-Are there other things out there that do what WURFL 
does? 

Yes. WURFL is the only device database that offers 
an open source license, but there are several commercial 
databases. Device Atlas is probably the best known 
alternative. Others include Mobile Aware and Detect Right. 


What APIs are there for WURFL other than the 
PHPAPI? 

ScientiaMobile provides Java, .NET, and Database APIs 
in addition to PHP. 

How does WURFL data get updated? More to the 
point, how would I get new data as it’s updated? 

ScientiaMobile keeps an eye out for new devices. 
Sometimes manufacturers provide information directly. Other 
times, people using WURFL submit the information. A large 
part of the work any device database vendor does is related 
to validating information provided about new devices. 

Who decides what capabilities get tracked by 
WURFL? 

ScientiaMobile picks capabilities based on suggestions 
from the community. 

Where is this WURFL community of which you 
speak? 

The community is a mailing list. WURFL has been 
around so long that the list is called the WML programming 
list. There are also conversations happening in the support 
forums on ScientiaMobile.com. 



Y ou ^ 娜 I - 

r,s 七 at 切 : //WM 扣叶 $ _ 00 • 己 0 
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WURFL: Clever API code 

When a WURFL API tries to match an incoming user 
agent to a known device, it doesn’t just go belly up if 
that exact user agent isn’t in the data. As it is totally 
impossible to track every single user agent out there, the 
API matchers instead perform some clever tricks when the 
precise user agent is not recognized. 

A tree of devices and their families 

As the WURFL API analyzes a given user-agent string, a 
series of increasingly generic fallbacks is evaluated, with 
the goal of at least slotting the device into the correct 
family of related devices. 

You can think of WURFUs data as a sort of tree of 
devices, with the trunk being a generic browser and each 
branch, twig, and leaf a more specific device or group of 
devices. The API tries to get as far as it can toward the 
exact leaf, but has the rest of the tree to fall back on if it 
cannot. 

Additionally, the WURFL data for a given device only 
defines the capabilities for that device (or group of devices) 
that differ from its parent device or devices. That way, 
the WURFL XML data file is kept reasonably small (a 
bit under 10 MB as of mid-2011)，despite the amount of 
information it really contains. 



Gee| Bits - 

WURFL APIs use a combination of algorithms 
to keep from getting tripped up by weird little 
user-agent quirks. 

One way it finds matches is by using matchers 
optimized for a given family of browsers or 
devices. The most recent PHP API has a few dozen 
handlers to deal with the analysis of user agents. 

The API first determines which handler makes the 
most sense for the given user agent. User agents 
with the string "BlackBerry,〃for example, are 
handed off to the BlackBerryHandler. 

Each handler is savvy about the kinds of 
differences that matter for user agents in its 
family, which cuts down on the amount of 
super-specific user agents that WURFL data 
maintainers have to track. 

The PHP WURFL API combines handlers with RIS 
matching (reduction-in-string — that is, removing 
pieces of an unrecognized user-agent string until 
it ends up with one it does recognize) to get to its 
end result. 



It's time to install WURFL ow your computer 

Check out Appendix iii for installation details. 
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start with the underpinnings 


Wc can build an explore page, too 

Once you have the WURFL PHP API installed, it requires a pretty 
small amount of code to build a page not unlike the ScientiaMobile 
explorer page. In fact, we’re going to do that right now. 



Wait. If ScientiaMobiles explorer page 
already lets me get WURFL information 
about devices, why do I want to go to the 
trouble of building my own version? 


Building the explore page will get your 
hands dirty with the WURFL API, and 
it will use data from your own data file. 

Learning by doing. That’s the ticket. We’ll build 
some underpinnings here that we can reuse for 
other — more functional — tasks. 

Also, the ScientiaMobile explorer page is driven by 
the so-called Database Edition of WURFL. The 
data is stored and matched slightly differently than 
the XML file-PHP API combination we’ll be using. 
Bottom line: the data is a bit different in little 
(but sometimes critical) ways. 

Plus, by having your own explore page, you know 
that you’re getting data from your version of the 
data file, not one that is older or newer than the one 
you have. 

Steps for building our explore page 


By ^ouir 

sc*t o( data yo^ 
Kavc m l^/URFl 
)(ML -f ile you 

dov/y\loddied wb 

'ms-tall'mj I^/URFL. 


I I Set up our working environment, files, and configuration for WURFL. 


Write a bit of (boilerplate) PHP code to initialize some WURFL 
objects so that we can start accessing capability information for 
the current browser and device. 


Organize the capability data. Build a page and output the data 
in an HTML table. 
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An explore page: Setting up our environment 


The first order of business is to get our directory structure sorted 
and a configuration file created. You’ll find a starting point in the 
explore subfolder of the chapter5 folder. 

By this point, you should have the WURFL PHP API up and 
running. You’ll need to know the location of its installation to create 
a configuration file (well, one that works, anyway). 

Pirectory structure for the explore page 



w 


chapter5 



explore 


l/Vell be cditihg -this 
ahd V-Charwihg it -fco 
^ttrxoyjt the example 




TWis -f ile holds some 
to&t jets 

lA/URFL device 

ov^ar\"»z^s it 




> 


Ouv- c^flov-c 

pay! Pisflay 

dafab'»l*»t>cs 



Simple s-tylcsiicc-t 

-foV" OUV" fay. 




config.php.example 



device.php 



index.php 

暑 

styles.css 


Tile ^Oh-piguv-atioh -file will tell 
"the explore dodc v/hc\rc "to *fihd 
you\r l/VURFL ihs-tallatioh. 





Your WURFL 
installation 



—► 





WURFL resources 



mRfu php 

API CoAt 



|/\/URFL daia souv-dc 



See "the ihstalla*tioh dppChdix i-p you 
y\ttd help lodatmg the \rcsouv-dcs 

0>r API Code dilrcd'toHcs ih 

WURpL. ihS-tdH. 


you\r 
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create a config file 



ExeRciSe 


You’ve got WURFL installed (we sure hope), but now we need to configure it to work 
in the web page we’re building. To do that, we’ll want to create a configuration file. 

Open config.php.example in a text editor. Make edits to the paths below as indicated, and 
then save the file as config.php in the explore folder (remove the .example extension!). 



WURFL DIR needs to point to the install directory for WURFL 



use 


V 




Change me ； please/ 
y\ttd -to edit these paths 
foiht io youv ovm 

APUodad 

^rCsouUes div-cd-tov-ics. 


Wr\ic oUc, 'reuse 
lVe’11 be v-cus'm^ *bV\is V’le 

vest i\\t examples 

m 七 Wis 




config.php.e^ampte 


Do” "t -Poir^ct "to Ircruovc 
"the example extehsioh. 




r 


''' 


Set up our working environment, files, and configuration for WURFL. 

Write a bit of (boilerplate) PHP code to initialize some WURFL 
objects so that we can start accessing capability information for 
the current browser and device. 


Organize the capability data. Build a page and output the data in an 
HTML table. 

Now we can write some code to 
initialize the WURFL objects and 
start getting at capabilities... 
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OK! We’ve got our configuration file. Now we need to create some code that will 
initialize WURFL stuff and get it all warmed up so that we can plumb its depths for 
device capabilities. Open device.php in your text editor. It’s rather empty to start with, 
so let’s plop in some WURFL-y code! 

device.php's job is twofold: initialize WURFL objects using the User-Agent header 
of the current request (that is, the user’s browser) and to organize the capability data 
for the device into something we can display on a page. 


This ihdludes 
doh-pig -file. 


ou\r hew 




require once('config.php'); 


$user agent = $ SERVER['HTTP USER AGENT']; 


$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile); 
$wurflManagerFactory = new WURFL_WURFLManagerFactory($wurflConfig); 
$wurflManager = $wurflManagerFactory->create(); 

$device = $wurflManager->getDeviceForUserAgent($user_agent ); 



device.php 



Tm OK with most of this, 
but I caiVt seem to get my 
head around what those last 
lines of code do. 


Those lines instantiate several WURFL objects 
and populate a device object for us. 

Most of this chunk is boilerplate code that we’ll cut and paste as 
needed to get WURFL into shape for our use. If you’re a whiz 
with PHP and this innately makes sense to you, kudos, but if it 
doesn’t, don’t sweat it too much. 


Continues overtirepa^e. 
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capability wrangling 

ExeRciSe - 

興 

Let’s take a slightly closer look at the last line of the boilerplate code chunk from page 
163. It’s where we tell WURFL how to build a device object. In our case, we’re using 
$user—agent, which currently holds the value of the User-Agent header of the 
requesting client. 

That is, we’re instructing WURFL to take the user-agent string of the current user’s 
browser and try to find a match in its data file. If it's successful, we’ll have a device 
object containing the capabilities of the browser and device. 


$device = $wurflManager->getDeviceForUserAgent($user agent); 

T 

The getDeviceForUserAgent method in the WURFL_WURFLManager class 
takes a user-agent string and returns the matching device (from WURFL data) as a 
WURFL_CustomDevice object. 



M *tWis fomt i-f 
•bWmJs wcir\*t v* 吵七， 

i\xt device tafabil'itics 
av-c v-cady bo use- 


Tyrahslatioh ： Wc -Peed it a 
sbr'iYi^, av\d it gives us a device object 
populated with values -Pov- the v^v^ious 
^pabili-tics. 


Setup our working environment, files, and configuration for WURFL. 


一 ’ Write a bit of (boilerplate) PHP code to initialize some WURFL 
objects so that we can start accessing capability information for 
the current browser and device. 


Organize the capability data. Build a page and output the data in an 
HTML table. 


Now that we have a populated 
WURFL device object, let’s 
organize the device’s 
capabilities so that we can 
display them in an HTML table. 
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The second job of device.php is to organize the capabilities info so that 
we can display it later. We’ll add a chunk of code to the file to organize 
capabilities by WURFL group. 

Drop the following code into device.php and save the file. We’re done 
with device.php for now. 


ytUs 七峨叫 s() r^ci\\oA 
simply air\ av-v-ay o-f 

WURFL youf y\amcs... 


...and jctC^pabili-ticslVamcsFov-^v-oupO 
gets ihc o( 七 he dapabilrties, w 
•m ihai g\roup/ 



$device = $wurflManager->\^etDeviceForUserAgentf( $user_agent); 

if ($device) { 

$groups = $wurflManager->getListOfGroups(); 

$grouped 一 capabilities = array(); 
foreach($groups as $a_group) { 

$grouped 一 capabilities[$a_group] = array(); 

$capabilities = $wurflManager->getCapabilitiesNameForGroup($a_group); 
foreach ($capabilities as $cap) { 

$grouped 一 capabilities[$a_group][$cap] = $device->getCapability($cap); 



"This dodc ^liuhk oirgahiz^s the 
^p^bilitics of "the du\r\rCh"t device 
and bv-owsev- in-fco groups. 

\{!s -totally 0 ^ *>*f y ou do〆 七 
u^dev-sta^d to PttP 

is dom^i you £.3^ jus*t d-ofy 
m-bo i\\t -file. 



T^is is how wc addess the values 
^dividual capabilities. Wc\\ look 
你 0 代 closely at iWis ih a bit 


device.php 


► Still more to do over tire pa^e. 
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finish up 



ExeRciSe 


We’re done with device.php for now. Time to edit index.php and add some code. 


[ZT Set up our working environment, files, and configuration for WURFL. 


Write a bit of (boilerplate) PHP code to initialize some WURFL 
objects so that we can start accessing capability information for 
the current browser and device. 


Organize the capability data. Build a page and output the data in an 
HTML table. 


We 


TWis ^a^rb is dor\t\ 


Time *to do 七 Wis. 



lieraic ovcv -the CoWcdcd ^_ 

dapabili-ty data, pov ea 吐 a <dl> 

wkh is o^\z^d by gvoup. 如栎 — Barnes dytd values of 

capabilities m youp. 


Lets display the usev- agcht 
a^d the id at-tv-ibulc o( the 
divide (WURfUs ID what 
this biroy/scv or device is). 


<div id= M devicedata M > 

<h2>Device Data</h2> 

<p>Device data for <?php print $user_agent; ?X/p> 

<pXstrong>WURFL Device ID: <?php print $device->id; ?X/strongX/p> 
<?php foreach($grouped 一 capabilities as $group_name => $my_caps) 

<h3 class="group"X?php print $group 一 name; ?X/h3> 

<dl> 

<?php foreach($my_caps as $cap_name => $cap) : ?> 

<dtX?php print $ cap—name; ?X/dt> 

<ddx?php print ($cap) ? $cap : ' [no value] ' ; ?X/dd> 

<?php endforeach; ?> f 丄 l . , n 

k 1 七 thc^rc is y\o value the 

^apabili-ty, display 



</dl> 

<?php endforeach; ?> 

</div> 


七 he stv-mj \o value? 


Display dafability … 
tacM <Ab>, dr^d value m 
<dd>. 


OK, let f er rip! Save index.php and 
view it in your browser. 



index.php 
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A good start! 


You can see all of the capabilities of your desktop browser now, with 
capabilities organized by group. 

— Set up our working environment, files, and configuration for WURFL. 

~j ^Write a bit of (boilerplate) PHP code to initialize some WURFL 
objects so that we can start accessing capability information for 
the current browser and device. 

Organize the capability data. Build a page and output the data in an 
HTML table. 


00O 


WURFL Tester! 

(Macing;,nt«,Mac OSXlO_7_2)Ap^^ 

WURFL Device ID: googlc_chromc_ 



Putwc caw make it better 

Instead of just showing the capabilities of the current browser 
(especially uninteresting if you’re in a desktop browser!), let’s make the 
explore page display WURFL data for any user agent. We can do this 
by dropping a quick HTML form into index.php and making a small 
change to device.php. 
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check out that user agent 


A quick owc-two punch to 
improve our explore page 


A couple of quick changes, and our explore 
page will be more useful. 


，一 SER\/ERrPttP 一 is sho\rthahd “ 
f e ^umhlly str^i^ai is, the 

will post -to -the 



<div id= M testform"> 

<form method="post" action="<?php print $_SERVER['PHP_SELF'] 
id= M useragentform"> 

<p>Test this user agent string:</p> 

<input type="text" name="useragent" id= n useragent 一 field" 
value="<?php print $user_agent; ?>" /Xbr /> 

<input type="submit" name= n submit” value="Test User Agent" 
</form> 

</div> 


?>' 


id="submit" /> 



Add B sho\rt -Poirirw that allows -the 
Ch-t\ry o( av\y usc\r-agch-t s-tv-ihg. 



index.php 


require_once('config.php *); 

$user_agent = (isset($_POST['useragent'])) ? 丨 — 

$_SERVER['HTTP 一 USER 一 AGENT，]; 

$wurflConfig = new WURFL Configuration XmlConfig($wurfIConfigFile); 


POST['useragent'] : 


Edit this lihe. 


卜 dcvitc pKp, ^o>/ b> see i-f 七卜 
is (ornx value (m f 一 POST) k 

usev o*t^cv-y/isc, y/c default "to {\\t 

£.uvvcr>*t bvoy/sev^s usev- 


device.php 
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Tesr DriVq 


o Save all of the changes and load up the 
index.php file in a web browser. 

The first time you load the page, you should see your 
own browser’s WURFL capabilities. 


❺ Try a few mobile browser user agents. 

Enter some mobile browser user agents into the form 
and explore the resulting capabilities. 


Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; DROIDX Build/ 
VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 
Mobile Safari/533.1 480X854 motorola DROIDX 



TVyi 




Mozilla/5.0 (webOS/1.4.5; U; en-US) 
AppleWebKit/532.2 (KHTML, like Gecko) 
Version/1.0 Safari/532.2 Pre/1.0 


[priF)0— 

WURFL Tester! 




Test oner Aom 


^aoenl string. 


Device Data 

Device data for MozilM.0 (Macintosh. InWMacOSX 10_7_2) AppteWebKii«34-30 (KHTMUifce Gecto) ChromeH2 0.742.122 Safari/534^0 

WURFL D«vfc« D: goofl»t_chrom«_1 

Fal back ： ooogte chrom# 

Actual Oftvieo Root 



poioftng-fnscwd 


no«cia_«Mon 



[noval ⑽] 

[novaiu*] 

[novaiu«] 

mm 

trua 

[no value] 
1.0 

[no value] 
[no value] 


Kow you day, ahy 
uscir-agcht st\rihg 3hd 
c^ploirc -the capabilities o*f 
the device. 



A o^ui^k y/ay b> -f 'rnd youv 
bvoy/sev^s ^uvvcr\*t UA 



Tired of typing in user-agent strings? 


We’ve got you covered. You’ll find a useful_user—agents.txt file in the 
chapter5 folder. All of the user agents mentioned in this chapter are in 
it, for easy copying-and-pasting goodness. 
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work that wurfl 


Put capabilities to work 



rm up to my ears 
in capabilities. How can I do 
something useful with them? 


OK, time to get specific. 

It’s time to figure out how to use WURFL 
capabilities to determine whether or not 
we should show that panic button on 
Acedlt!’s site. 


yeah, -thats 
whai wc v/cv-c up -fco.) 


Use WURFL to help differentiate content 


Let’s only show the big，red panic button on browsers 
that WURFL says are mobile browsers (not just narrow 
screens, a la CSS media queries). We’ll do this by using 
WURFL capabilities (bet you didn’t see that coming)! 

Steps to success 


Create a configuration file and add some code 
to initialize some WURFL objects — that is, get ^ - 、 


information about the current device and make it 
ready for us to use. 

Ask WURFL about the specfic capability or 
capabilities we care about. 


Wc leaded how *to 
do 七 Wis fart *tKc 
last c%cv-d*»scf 


Add some code to the I’m Freaking Out! page 
mockup to alter the content delivered to different 
devices based on the value of capabilities. 
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Ask WURFL the right questions 

Back on page 165, we briefly met the getCapability method for the 
$ device object. 

That’s a handy method. Even if this class and instance mumbo-jumbo is 
generally Greek to you, getting at those capabilities is not too tricky, and 
we’ll show you how. 





Copy the config.php file from the explore 
directory into the panic_button directory. 


Getting a value for a specific capability looks like this: 


fvaluc will cithcv be -tlic value 
ik devils dapabili-ty as a 
stjrmg, o\r MALL if thcv-c is^i 
3 value- 


_c 一 tablet’ 


ov 


Kamc of dapab*ili*ty >wcVc 

ask'm^ abou 七 as a -j 


$value = $device->getCapability($capability name); 




A l/VURFL Cus*fcomPcv*idc objedt 
already m'rtializjcd populated- 



W! I! do this ih the device php 
ih just a scC. 


A couple of examples: 




s 


i\\\s a mobile device? 


$value = $device->getCapability('is wireless device'); 




Does this bv-owscir-dcvi^c 

dombo support dookics? 


Note that when you retrieve capability values, you don’t have 
to worry about what group the capability is in. Groups are a 
nice organizational concept, but each capability is uniquely 
named and can be asked for directly. You’re not required to 
use capability groups to interact with WURFL. 



*to see m-fo about sll 
dapab*»l*»t«cs? aedk out 咐 " 

souv^rfovy wtAelf 一 do 乙 



panic—button 



-foV" 

button 


utton.png 


-議 

config.php 


1A/URFL 

doirvfif a 七 I。灼 



l/\/URFL dcv'idc 

— -bestmj 

device.php 

'o 

A 州。匕 kup 

the 1^ 

index.php 

page 




styles.css 


directory and file structure 
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as/c wurfl 


Initialize the device and get the iwfo ready 


You’ll see that we’ve given you a bit of a leg up in the panic—button folder. 

The device.php file already contains much of the WURFL boilerplate stuff you 
need to get your proverbial house in order. 

We’re going to be using a different method to instantiate the device than we 
did for the explore page. Instead of using a user-agent string and calling the 
getDeviceForUserAgent method, we’ll tell WURFL to use whatever 
values are in the current server request (contained in PHP’s always-available 
$_SERVER variable). 


T\ra^sla*tio ^： ^ivc us device 

data (or ihe device dumpily 
atdcssmg -the scv-vcv-. 



$wurfIManager = $wurflManagerFactory->create(); 

$device = $wurfIManager->getDeviceForHttpRequest($ SERVER) 


Z 1 


Is this thing mobile? 


This mrthod also takes h*m*ts -fv-om 
a Couple o( o*thcv HTTP headev-s 
besides user-aje^-t header— 
bu*t uscv--ajc^*t is s*ti|| md'm 
sou\rdc dues. 



device.php 


Now we’ve got our WURFL device all warmed up. Let’s ask it stuff. 

WURFL has a nice baseline capability called is_wireless_device, 
which answers the basic question: is this a mobile device? So, it would 
seem we’d want to do something like: 


Sounds like a TRUE/FALSE 
fBoolcah) type o-P ^ucs-tioh. 
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Pawgcr, Will Robinson! 


In the PHP API, all capability values are returned as strings. That means 
that the seemingly Boolean capability is—wireless—device has three 
possible values: ▼ true ▼, ' false ', or NULL (NULL means that WURFL 
doesn’t have a value at all for that capability). 

We need to be more explicit, or the value 1 false ' will evaluate as true, 
and nonmobile devices will look like mobile ones. So we must make this 
alteration. Replace the last line we wrote with the new version: 


PUP ； "the is 

"bruthy. you have ho \dtB what 
七 ha 七 0~l\- Jus ■{: use 

■fclie 乙 ode below 'ms-tcad of -the 

last todt snippet oh pay I7Z. 


$is phone — $device->getCapability('is wir 0 less device') 

$is^phone = ($device->getCapability('is— wireless 一 device ， 


， true') ? 


true 


false 



TKc *tv*iflc-c<\uaU \AtY\hbf ofera-tov hc\rc 吣 
七 ha 七 value must be c^adily the sbr\^ o( 

1 *tvuc , *to f>ass ; v\oi jus*t ar>y *tv-u*tKy value. 



Now, use that value 


device.php 


The device.php file gets included in the index.php file, so we can 
access the code we just wrote. We want to add the following PHP 
conditionals to index.php. 


<div id="content"> ^ rt0[[A ^ as mobile 

<hl>I，m Freaking Out!</hl> 七 ^ »s 一 wireless 一 

<? P h P if ($is^>hone): ?> ^ 

<div id= n panic_button n > 

<img src= n button.png" alt= n HELP! n / > 丄 l • , 

</div> ^^ … sh ow 忪 p w 

<?php else: ?> Hi 3 CSS 咖 ). 

<h2>Help is only a phone call away.</h2> 

<div id= n big—number’▼> 

503-555-2939 _ 

</div> 

<?php endif; ?> 

<p>Pre-test late-night jitters? A math problem that just 
won't budge? Our expert on-call tutors are standing by to help 
you through tough moments.</p> 

</div> 


Itl 

index.php 
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are you freaking out? 



Tqst DriVq 


Make the changes from pages 171 and 173 to config.php and index.php, save the 
files, and then view the resulting I'm Freaking Out! page in a desktop browser 
and a mobile browser. 


I f m Freaking Out! 

Help is only a phone call 
away. 


TV>c ov> a 

mobile 


5O3-555- 

2939 


■■… AT&T 令 10:37 AM 




I'm Freaking Out! 


Pre-test late-night jitters? A math proble] 
Must won r t budge? Our expert on-call tutor ； 
standing by to help you through tough 
moments. 


The bu*ttor> does " 七 show up oy \ 
desk-top browsers, cvc^ wi 七 h a 
narrow v/’mdow. 


Pre-test late-night jitters? A math 
problem that just won’t budge? Our 
expert on-call tutors are standing by 
to help you through tough moments. 


mm 
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WUR1FL Exyosedi 

This week’s interview: 

What’s the use of WURFL? 


Interviewer ： So, WURFL, what exactly did you bring 
to the table here? 

WURFL ： Seems pretty clear. You can tell right off if the 
browser is mobile! 

Interviewer ： There are other ways to do that, you 
know. Client-side detection, basic server-side detection — 

WURFL ： Basic mobile-or-not-mobile is sort of child’s 
play. You’re not using me to my full potential. 

Interviewer: All right, try me. 

WURFL ： So, I challenge you to look at the page on an 
iPod Touch. 

Interviewer ： OK... [a long pause while the interviewer digs 
through a drawer of mobile devices ].. .yep, the big red button. 

WURFL ： Doesn’t that seem a bit...well, perhaps not 
what you intended? When’s the last time you were able to 
make a phone call from an iPod? 


Interviewer ： Great. The button doesn’t make sense on 
iPod Touches. Now we’re back to square one. 

WURFL: No, no. Like I said, you’re not using me to my 
full potential. Dig deep and revisit my capabilities. I think 
you’ll make a nice discovery or two. 

Interviewer ： But you have over 500 capabilities! How 
will I find the right one? 

WURFL ： You’re complaining because I’m too 
comprehensive? I can’t win! Fine, I’ll give you a hint: 
just because the button is showing up on mobile devices 
doesn’t mean it actually makes a phone call — you haven’t 
linked it yet, so it’s a pretty image, but not functional. 

You might think about that and take another look at my 
capabilities. 



The button shov/s Uf OY\ 
By\ iPod Toudh.-.v/hcv-c i*t 

doesn't make any sc 的 sc. 



Go look at our explore page and investigate the capabilities for an 
iPod Touch (where we don’t want the button to show up) versus 
the capabilities for an Android Nexus S (where we do want the 
button). You might also look at a desktop browser for comparison. 


Can you spot a capability that will help us make the differentiation 
between a small or mobile device and an actual phone? 


Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_2 
like Mac OS X; en-us) AppleWebKit/533.17.9 
(KHTML, like Gecko) Version/5.0.2 Mobile/8H7 


iPod Wh UA 


Safari/6533.18.5 


Kcxus £ UA 

Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; . 

Nexus S Build/GRI40) AppleWebKit/533.1 (KHTML, J 
like Gecko) Version/4.0 Mobile Safari/533.1 
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to call or not to call 



The WURFL bearer capability group has a handsome capability called 

has—cellular—radio. We’ll be looking at the value of that capability to evaluate 

whether the current request is conning from a phone, not just any mobile device. 

We're also going to make friends with the xhtml—make—phone—call—string, 
as it will show us how best to create clickable phone number links for this device. 


Make the page a bit smarter with WURFL 


By testing the value of has_cellular_radio, we can get a good idea 
as to whether the current user is on a phone. We also need to know how we 
should link the phone number such that when users click on it, it initiates a 
phone call. 

The value in the xhtml_make_phone_call_string is a hint to the 
syntax we should use when linking up phone numbers such that when the link is 
clicked, the phone knows to instigate a phone call. For the Nexus S, this value is 
tel : . 

For the iPod Touch, this value is none. The iPod Touch doesn’t make phone 
calls. Desktop browsers will also return a value of none. 

By combining the value in xhtml_make_phone_call_string with the 
phone number we want to dial, we can create a working link. 

Making phone calls with links 


has 一 “IWarjradio capability »s 
K br\At a^d is a useful value 

makeMl ^afabilrby, v/ell 

tor\sidcv* His a 


Mobile phone browsers recognize certain URI patterns in links as phone 
numbers. When a user clicks on this kind of link, an alert box prompts her to 
confirm that she really wishes to place the call. 


tel: is the most common URI schema for phone numbers, and works for 
nigh all modern smartphones. But it doesn’t hurt to use WURFL’s value in that 
xhtml—make—phone_cal 1 一 string field. You’ve got it anyway. Here’s 
what we end up with: 


tel: lihks wovk without the 
匕 ode (+ 1 ). Bu*t "to be dbou't 

you should use erne. Plus, i*t 
rwakes you sccrw so wovldly. 


<a href="tel:+15035552939">Make a phone call</a> 
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The panic button: For phones only 

We can include additional tests in the device.php file to look at the 

has cellular radio and xhtml make phone call string values. 


First lef s get the values 



$is_phone -— ~~($device->getCapability ( T is_wireless_device T )~~ 1 true 1 )~~? 

true~ : ~false; 

$has_radio = $device->getCapability('has_cellular—radio'); 

$phone 一 string = $device->getCapability (' xhtml_make_j>hone_call_string'); 



$phone_string = $device->getCapability('xhtml_make_phone_call_string'); 

$is^phone = false; 

if ($has_radio === 'true' && $phone 一 string && $phone 一 string !== 'none') 
$is_phone = true; 

} 



device.php 


This is why wc have 
"to test both -fov- 
the cxistchdc o( 

that its Voilue is hot 
the s-tvih^ 



‘none 9 is a meaningful value! 

Recall from page 173 that, in the PHP API, 
CustomDevice->getCapability () returns either a 
string (if a value is present for that capability) or null (only 
if WURFL does not have a value at all for that capability). 


The difference is critical. 


For WURFL-identified devices like the iPod Touch and desktop browsers, 
the value for xhtml_make_phone_call_string is the string ' none '. 
If you treat this as a Boolean value in PHP, it will evaluate as true. 


you are here ► 


177 



















calling questions 


tWeiare nQ ^ 

Dumb Questi9ns 


Don’t mobile phone browsers 
automatically recognize phone numbers 
and link them for you? 

Most do, yep. But a couple things about 
that. Most relevant to our present situation: 
our link was an image, not a phone number. 
There was no text. A phone likely would not 
have recognized it. 

Also, various phones’ abilities to correctly 
recognize phone numbers is hit or miss. 

Opera Mini has a tendency to think that zip 
codes with the plus-4 extension are phone 
numbers. Trying to place a phone call to a zip 
code has curious results, as you’d imagine. 

Also recall that we are being quite 
formal with our phone number formatting 
(+15035552329). One might want to display 
a slightly different string in the link text itself, 
yet be confident that the link itself will be 
formatted correctly. 


How come there has to be that 
pop-up confirmation box after a user 
clicks on a phone call link? Why can’t it 
just spawn a call directly? 

This is to protect the user from being 
tricked. A visible phone number link might 
have one number, but the link itself another. 
Some poor suckers might end up calling 
a scammer when they thought they were 
cancelling their local newspaper subscription. 

In our case, we’re not even displaying the 
phone number, something that is arguably 
not really a best practice. We could also 
use a CSS background image instead of 
an inline image, have the phone number as 
the text in the link, and use a big negative 
margin in CSS to hide the text. 

In English, please? I didn’t major in 
CSS in college. 

Using a large negative left margin 
(e.g., margin-left : -lOOOOpx) 
is a way to get text to go way off to the left 
and be invisible. We like to visualize the text 
somewhere 10,000 pixels to the left, floating in 
the air somewhere in our office. But we’re weird. 


So, we think a browser that has a 
non-none value for xhtml 一 make- 
phone 一 call 一 string is on a 
mobile phone that can make phone calls, 
but do we know? 

WURFL has some intelligent data, but 
it’s not that smart (no one is). There’s no 
clear-cut way to be absolutely certain a user 
is on a functioning cellular network (versus 
WiFi or something else) or that there are not 
other things preventing the actual placement 
of a phone call. But, really, this gets us more 
than most of the way there. 

Couldn’t we just test that the 
value of xhtml 一 make_j>hone_ 
call 一 string isn’t ' none ' and 
call it done? Isn’t the test for has 一 
cellular—radio redundant? 

You might be on to something, 
Smartypants. 

Speaking of Smartypants, you 
glossed over it pretty quickly, but I 
actually do want to know more about the 
WURFL objects and API.... 

Hey, we heartily encourage you to go 
look at the PHP classes in the API and see 
how they work together. If you’ve installed 
the API, you’ve got the files already, so hop 


AT&T 令 


10:37 AM 




I'm Freaking Out! 


Pre-test late-night jitters? A math 
problem that just won't budge? Our 
expert on-call tutors are standing by 
I to help you through tough moments. 


I，m Freaking Out! 

Help is only a phone 
call away. 

503-555 

^939 

roblem tha t Just won't budge? Oil] 

二 t on-call tutors are standing 
^el^ you through tough moments. 


to it! 


Ko move OY\ 

iPod louth! Bu*t s*till 

OY\ iPhone! 
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Jim: This could get out of hand! In a more complex project — or even 
Acedlt!’s site, if it adds more mobile bells and whistles — it seems like using 
scattered, individual WURFL capabilities all over the code would cause a 
lot of headache and mess. I mean, if we end up with one capability being 
tested for in one template, another capability being tested somewhere else... 
and so on.... 

Frank: I agree. It seems like we’d be delivering a slightly different website 
to every possible combination of capabilities — a nightmare to think 
through and test. 

Jim: A one-way ticket to spaghetti code, yeah. 

Frank: But I don’t want to throw out the whole concept. Even though I 
like to try to do feature detection on the client, and we still want to make 
our stuff as responsive as possible, it does seem like a device database like 
WURFL can give us insight into some details that we might not be able to 
get from other sources. 

Jim: But how do we corral all of this so it doesn’t make us crazy? 

Frank: It seems like if we could group devices logically — instead of testing 
capabilities piecemeal — we might be able to keep our sanity. Remember 
how we recently spent time thinking through how to evaluate which devices 
to support by picking and choosing features and drawing the line for 
phones that don’t make the cut? 

Jim: Do I ever. I’m still somewhat cross-eyed from those exercises! 

Frank: It seems like we could go one step further and create buckets of 
devices that are within the group of devices we decide to support. 

Jim: Interesting.. .1 think you might be on to something. 



After updating device.php with the changes from page 173 with the stuff on 
page 177, you might realize that you don’t have an iPod Touch on hand to 
test the changes. 


You 6 扣 -f md oy\C. 
oy\ 17^. 



To see what an iPod Touch would see, edit the device.php file. Use 

the getDeviceForUserAgent () method instead of the 
getDeviceForHTTPRequest () method and give it an iPod 
Touch user agent. 


► 加 swers on page 18 o. 
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device class corral 


Herding devices 


A device class creates a sort of logical corral into which 
you can herd devices that have certain things in common. 

Just as a rancher might put spotted cattle into one field, 
giant work horses in another, and little piglets in yet 
another (can you tell we’ve never been ranchers?), we can 
sort our devices into virtual cubby-holes with device classes. 


Sort once, then go 


Once our rancher identifies an animal as belonging to 
one of those three groups, he can make further decisions 
without having to look at the smaller details. He can feed 
oats to the horses without stopping to reverify that they 
have legs of a certain length or swishy tails or can support 
PNG images (everyone knows that horses lack support for 
transparent PNGs!). 

He already knows they’re horses because they’re in the 
horse corral. He doesn’t have to tailor feeding to each 
individual animal (that would be a lot of horse meals to 
keep track of). But, at the same time, he doesn’t feed oats 
to the piglets. 


A device class is an abstract 
collection ol common 
ckaracteristics tkat deiine 
a group oi devices (and 
tkeir browsers). 




You can test what content gets delivered for a given device or browser by using its user agent 
when intializing the WURFL device. 



$wurfIManager = $wurflManagerFactory->create(); 

$device - $wurflManager->getDeviceForIIttpRequest($_GERVER); 

$user_agent = "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_2 like Mac 
OS X; en-us) AppleWebKit/533.17.9 (KHTML , like Gecko) Version/5.0.2 
Mobile/8H7 Safari/6533.18.5"; 

$device = $wurflManager->getDeviceForUserAgent($user_agent); 


device.php 
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device databases and classes 


Pevice classes 

As we learned earlier, we can run incoming requests against 
a device database to get device information. By grouping the 
capabilities and values that matter for the site at hand, we can 
adapt content across an entire device class instead of chasing 
down each individual capability’s value. 

These device class definitions, converted into code, sort 
devices into one of several groups. Once our devices are 
sorted, we can take action without having to keep track of each 
individual constituent capability. 



\ruh ajaihs-t 3 


Code evaluates yn\\\cM tlass 


mattes based on 


device da'ts* 



\y\ 七 his hypo*thc*tidal example ； 
devices a\rc so\rtcd m*to oy\C o( 
-fou\r groups. 



Pesk*top - like dcvifi.es 


Spi-ffy, 

sma\rtpliohCs 



liy^ 


kz. 一 

road s^air-tphohcs 

扣 d ady/aued 

-Pca*tu\rc phohes 



T\\t bav is sc*b V^cvc 
(like m Chf 七伙十 ). 

Devices -tha-t did^-t mcc*t 
bottom — I’me v-c^uiv-crwc^ts 
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study aids on the go 


The picture just got a lot bigger 



Hey, you guys. Nice job on that panic button! 
Do you think you could help us mobile-optimize 
a big new site were building? 


Expanding a lucrative part of Acedltl's business 

Acedlt! is building a standalone website for the study aids it sells 
to its students. It’s realized that flashcards, practice test booklets, 
reference books, and the like are selling like hotcakes, but the only 
way to purchase things right now is through a printed catalog. 

It’s time for a change. Acedlt!’s new study-aid-specific site will 
not only allow users to buy any physical product online, but will^^ httd\{) 
also introduce online products like flashcards that can be used 
interactively, right on the site itself. 


An early look at what it has w mind 

It’s early yet. Logo designs haven’t been finalized, content is still 
being evaluated, and the design is still in simple-mockup phase. 
But let’s see what the company’s up to: 


! s devs 

buildihg these 
Tcatuvcs USih0 

oihev s-bhdavd 
web 


Uscv-s CBv\ siiof onl'mc 
ar\d study now — use 

pv-od^-b — s 
v-ijK-t oti -bKc srtc ilscl-f • ■ 

A 匕 edit’ v/ill -Pcaiuv-c 

pv-odud-b \ y \ a snazzy 
Flash rwovic- 



Acedlt! Study Aids 


mS 



^ web 

•folks sch-t -this 
C3\r|y r^o^kup of 
"th hew si*tc ； s 
c page. 




Shoponllne 


>tudy Now! 


Contact Us 


Mnrhi mm crat non ipsum pharctra 
tempus. Donee orci. Proin in ante. 
Pellentesque sit ametpurus. Cras egestas 
diam sed ante. Etiam impardict uma sit 
amet risus. Donee omare arcu id erat. 
Mimmfi^S^^^eiensque sem. In eliT^ 
mnlestie oel, omare sit amet, 
interdum vel, mauris. Etiam dignissim 
imperdiet metus. 


Featured product Flash slideshow. 


Lorem Ipsum 

Dnne.c. nmare arm id erat. Aliquam 
ultrices scelerisque sem. 

Lorem Ipsum 

Donee omare arcu id crat. Aliquam 
ultriocs soclcrisquc sem. 



"Hie horyte 






P"ts -P\rorh 
^ompahys blo0. 


Banh mi before they sold out hclvctica 

Aitisan master cleanse art party, aesthetic 
cninoa beard american apparel retro 
L*ncatch«* twee. Seitan irony cliche 
biodiesel, trust fund dreamcatcher 
artisan VHS 4 1 heard. 


Trust fund vogan PBR 

Aesthetic VHS art party, banksy craft beer 
fanny pack wolf american apparel k>mo 
tofu photo booth skateboard locavore 
Portland. Next level messenger ba^ 
trust fimd art party heard blog ethical 
Austin. 


Locavoro marfa fixio 

Echo park Williamsburg terry richardson, 
cred before they sold out stumptown 
readymade. Organic keytar readymade 
freeman 3 wolf moon r Williamsburg viral 
hnnh mi next lpvd aesthetic. 


These ads aYt 

^ elated 

_ scv-vi^cs, like paper 
p<roo4cadihg ahd 

1 心 1 s-tudy groups. 
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device databases and classes 


Evaluate the home page wearing 
mobile-tinted glasses 


The scope of the new study aid site is much bigger than the 
single panic button page. We risk making ourselves crazy if we plan 
development piecemeal, capability by capability. One way to frame our 
development approach and make the site work well for different kinds of 
users is to group the different experiences using device classes. 

Combining device data with logical grouping 

The process of defining device classes is related to the work we did in 
Chapter 4. We look at the task at hand, figure out what things matter, 
mumble a few incantations, and come out the other side with some 
general criteria. 

We know. “Group the experiences using device classes” is 
catastrophically vague. Let’s start by reviewing the mockup again and 
weighing Acedlt!’s priorities against what we know about mobile web 
characteristics and constraints. 



wc khow. Wc Ohly 
have a \rouah 

ght how. But 


3 \rough I 
匕 kup +o\r v-i( 
the wi|[ be b\roadcv- 
this f\rojc(it...CVCh-tually. 


Oh 



dmmcatchcr twm. Scitan troay cbcht 
retro bkxliesd. trust fund dreaincatcher 
4ItlSAD VHS M beAfd. 


tofa photo booth skattbotrd locavore 
Portland. Next level messenger bag ^i, 
trust fund art party beard blog ethk«) 


A^cdl-t! V^as made *»*b 
vcv-y dcav- *t^c 
m-tcv-adtivc 
OY\ s'i*tc av-c 


” AJAX ^Asyh^hv-Ohous 

a„d XML) devi^ 

^pabili-tics ih rvtihd. 


a lot 

tomflc% CS£^ s-tylmj 
wo 灼’七 y/ov-k ov\ 

all dev^cs. 


Wc 匕扣 pu*t "the do 外七⑼七 *PiV"S 七 
扣 d "the ^aviaa*tio^ r>cav-cv- {p 

"the bottom -Pov- mobile layou-ts. 


ahd ^9^hi„ 9 up header 


Atiquam ultrices scclcrisque sem. In c/if 
nulla, mofesrie vet, omare sit amet, 
interdum vel, mauris. Etiam dignissim 
imperdiet metus. 


luvij 

n master cl 


they told out ho»veuc« 


Trust fund vootn PBR 


Locavore marfa fixic 


Aitisan master deuisr ait p«rty. icsthetk 
quinoa beard amchcan appard retro 
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full-fat design vs. s/c/nny design 

ftroup requirements iwto multiple mobile flavors 

The full-fledged interactive site experience has some high demands. Mobile 
devices need to have the kind of JavaScript, HTML, and CSS support that is 
usually found in newer, swankier browsers on smartphones. Specifically, the 
Acedlt! devs are targeting mobile devices running WebKit-based browsers and 
designing for screen sizes no narrower than 320 pixels. 


But that doesn’t mean everyone else should get the cold shoulder. Smaller, 
slightly less cutting-edge phones are still welcome on the site. They can buy 
physical products in the online store and visit the other areas of the site. They 
just aren’t cut out for the heavy-duty interactive experience or the hardcore CSS, 
for example. 


Instead of delivering to the lowest common denominator or kicking out devices 
that don’t quite cut it, let’s create two separate flavors of the site that make 
sense for each group of devices. 


pieces o-f -the 
siic look best oh 
ai Icasi 
pixels wide. 




Acedlt! Study Aids 




Morbi non erat non ipxum pharetra tempus. 
Donee urcL Proin in ante. Pellentesque sit amet 
purus. Cras egestas diam sed ante. Edam 
imperdiet uma sit amet rixus. Donee nmare 
arcu id erat. Aliquam ultrices scelerisque sem. In 
elit nulla, molestie vd, omare sit amet, interdum 
ml, maurix. Etiam dignisxim imperdiet metm. 

5Hatic featured product image. 



Acedlt! Study Aids 

bi non erat non ipsum pharetra tempus. Donee 
Proin in ante. Pellentesquc sit amet purus. 



A fuller mobile experience 

By creating a device class that encompasses the requirements 
for the richer mobile experience, we can design something neat 
without risking poor support on lesser devices. 


By specifying that devices in this class must have a WebKit- 
based browser, we can use CSS goodies like gradients with 
relative confidence. We can also rely on a certain level of decent 
JavaScript support. 

A simplified experience for simpler phones 

For narrower screens and less powerful devices, let’s be more 
streamlined. And let’s not assume support for all of the modern 
browser bells and whistles. 


Cras egestas diam /xd ante. Etiam imperdiet uma 
sit amet risus. Donee omare arcu id erat. Aliquam 
ultrices scelerisque sem. In elit nulla, molestie vel, 
nmare mt amet t interdum w»/ # maurix. Etiam 
dignissim imperdiet metus. 

Static featured product image. 


■ 


Home 



higher—mobile 



This simpler layout doesn’t provide the link to the online products, 
but users can still shop in the online store. This version works 
fairly well down to about 176 pixels wide, at which point the 
product images in the store become difficult to see. 


The lahding page 
^o^ked up as it 
would appear 

ca 匕 h device 匕 lass 


Now we have a rough sense 
of our two mobile device 

classes, higher mobile and 


simpler mobile. 


simpler—mobile 
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Rounding out our device classes 

We now have a rough sense of two mobile device classes 
we’ll want to construct. What else? 

OK by the way, tablets 

Acedlt!’s devs are also working on a tablet-optimized, 
super-nifty, touch-driven interface for their online products. 
It’s not done yet, but they want to be prepared for its 
eventual launch by being able to identify tablets now. 

Where to draw the line 

It’s important to the Acedlt! folks that their visitors can 
either shop online or use the online products. If visitors 
can’t do either because of device constraints, the device 
and browser they are using are considered unsupported. 

The company’s ecommerce software requires cookie 
support and a bit of JavaScript support (not nearly 
as much as the online interactive products). It is also 
mandatory that, for security, devices support SSL. 



Our device class lineup 



WebKit-based 
browsers and at 
least 320px width 


higher_mobile 


Hey, desktop is a 
device class, too! 



desktop 



simpler_mobile 

Minimal JavaScript 
support and at least 
176px width 


Yep, tablets 



Is delinquent in any 
of the totally required 
characteristics 



tablet 


unsupported 
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interview with a device class 



Device Classes Bxyosedi 

This week’s interview: 
Abstraction to execution...what 
exactly is a device class? 


Slightly Confused Web Developer: I，m 

having trouble getting my head around this device 
class business. A collection of capabilities.. .tied to 
an experience? 

Device Class ： I admit, I am a bit difficult to 
capture. If I were a painting, I’d be an abstract blur. 
I’m a concept, a way to think about organizing 
common things so that we can create just a few 
flavors of a site, instead of a million billion. 

SCWD ： So, a device class is a set of WURFL 
capabilities — 

Device Class ： Not so fast. Remember that I’m 
an abstract concept. We’ll be using WURFL here, 
but there’s no reason you have to. No reason, in 
fact, you have to use any device database. 

SCWD ： This is all starting to feel a bit woo-woo. 
Gan you help me understand where the rubber 
meets the road here? 

Device Class ： OK. Let’s plan this together. For 
Acedlt!, we’ll have five device classes. 

SCWD ： Does that mean we’ll be making a version 
of the website for each? That sounds like a big task. 

Device Class ： No, we only need to focus on 
the differences. For example, until the new touch- 
based, tablet-optimized flashcard interface is 
launched, the tablet-device-class version of the site 
only differs from the desktop version in that no 
Flash content will be used. 


SCWD: OK, so we have a desktop device class, 
which is self-evident.. .and that tablet device class, 
which has minor differences.. .let’s see. What are 
the differences between higher—mobile and 
simpler—mobile? 

Device Class: As we know that 
higher—mobile represents devices with larger 
screens and capable WebKit-based browsers, 
we can be more confident that they have the 
horsepower to handle some of the site’s more 
intensely interactive features. 

simpler_mobile, by contrast, represents 
devices with narrower screens and perhaps less 
cutting-edge browsers. We can give them smaller 
images (yay! less bandwidth). We know they support 
a bit of the oF JavaScript, but can give them a dose 
of content that is less deluxe. 

SCWD ： Wait, how do we know that the 
simpler_mobile devices support JavaScript? 

Device Class ： We will test for at least a modicum 
of JavaScript support. Devices that don’t have the 
ability to modify the DOM after page load will be 
shunted off into the unsupported device class. 

SCWD ： So what’s up next to keep this ball rolling? 

Device Class ： We need to map the right 
WURFL capabilities and their values to the 
device classes we want to create. After we have 
a logical representation of the device classes, we’ll 
create code to do some actual testing and slotting. 
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Paa] Puzzjc 

Time to find the right WURFL capabilities 
and values for our device classes. 
Your job is to take the WURFL 
capabilities and values from the 
pool and place them into the blank 
device classes. You may not use 
the same item more than once. 




higher—mobile 



lesser—mobile 


Note: each thing from 
the pool can only be 
used once! 


unsupported 
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exercise solution 


puzz]c 



lesser mobile 


unsupported 
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tJiereiare no ^ 

Dumb Questi9ns 


Why the focus on WebKit-based browsers? Are the 
devs hating on other, totally decent mobile browsers? 

WebKit-based browsers are seen by many mobile web 
devs as both fairly advanced and consistent. Browsers with 
the WebKit rendering engine generally have good support for 
HTML5, JavaScript, and CSS3. 

Note the word generally in the previous sentence. The problem 
is, there is a misconception as to just how consistent browsers 
based on WebKit are. The sad truth is: there’s still a lot of chaos. 

Mobile platform strategist Peter-Paul Koch spells out the 
pitfalls of assuming consistency in mobile WebKit browsers 
in the thorough post "There is no WebKit on Mobile” on his 
QuirksBIog (http://bit.ly/uWnFLa). 

If mobile WebKit isn’t really a “thing，” why are we 
basing a device class on it? 

Consistent and reliable or no, WebKit-based browsers 
are what the devs have done their development on and testing 
for. At this point in the project, it is too late to throw the net 
wider. We’re kind of following their lead on this one. 

How is testing for the string 1 Safari ' or 
'Android' as the mobile browser name equivalent to 
finding all WebKit browsers? 

^\^lYou might recall from Chapter 3 that user-agent strings 
are wily creatures. Apple's history with respect to WebKit 
endures in the user-agent string legacy. At time of writing, all 
known mobile variants of WebKit browsers have either “Safari” 
or “Android” in their browser name (yes, even WebKit browsers 
on BlackBerries and Nokia phones and whatnot). 

If I use device classes in a project, will I always have 

five? 

Nope. You might have 10,4, or 0. Having fewer means 
less complexity. Having more means more nuance. 


What’s with the names higher—mobile and 
simpler—mobile? Is there a naming convention I 
need to know about? 

Eh, we just pulled those out of a hat. They sounded 
about right. We used underscores simply so we can translate 
the names into code more easily. You can call your device 
classes whatever you’d like. Within reason. 

Now that we’ve got device classes, I can never test 
an individual device capability? 

You can totally still test individual capabilities. In fact, the 
solution for the panic button problem was very appropriate: we 
were testing for the value of a very specific capability—a value 
that might differ among devices in the same device class (an 
iPhone versus an iPod Touch, for example). 

Couldn’t a device match more than one device 

class? 

Yes. We need to arrange our device class testing code 
in order carefully. The first matched device class will be the 
device class we assign. 

What the heck is the CustomDevice object I 
keep seeing in the code examples? 

CustomDevice is simply the name of the class in 
the WURFL API that represents a device and its characteristics. 

Seems like device classes are not just a mobile web 

thing. 

Not at all! Content and layout adaptation is a concern 
that spans the entire Web. The mobile web doesn’t have a 
monopoly on that. 

OK, great. I have some circles with some 
capabilities and required values in them. Now what? 

Turn the page, my impatient friend. We’re going to start 
turning these device classes into code. 
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grouping groundwork 


Lcf s get this show oh the road 

Now we need to convert the abstract notion of what we’re grouping into 
real code that will detect and slot devices into the appropriate device class. 
Here comes the sorting! 


□ 

device—classes 


Put, first... 

Find the device—classes folder in chapter5 ， and then the test_classes 
folder beneath it. Eureka! This is our playground for now. 



test classes 


This is probably starting to feel pretty familiar: we need to set up 
a configuration file so that WURFL can be initialized. Start by 
copying the config.php file from the panic—button folder into 
device—classes / test—classes. 



config.php 

To doy/h or\ busyy/ov-k, y/c 
Gobbled this -toythev -Pov- you. 



Awd we're off! 


device.php 

^ Wll add oe 

^ i\st ^ pays, 
device—classes.php 



Here’s what we’re going to do: 

Write a (PHP) function to test the individual 
device capabilities we care about in each device 
class definition. 


a 


f\ simple -to 

usev a^d sec 

index.php dcv\dc 乙 lass 



yb slotted 


styles.css 


Translate each device class’s capability requirements 

into conditional (if/then) statements in code 

so we can determine which device class the current 
device should be assigned to. 

Write a simple test page (similar to our WURFL 

explore page) to see how different user agents get 
sorted into device classes. 
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fret acquainted with the matching fuwctiow 

You’ll find this matching function already waiting for you inside of 
device—classes.php. We’ll use it when we create the individual tests for 
each device class. 


We wanted to tell you a few things about it before we started taking 
advantage of it. Stand back; here comes some PHP. 



S Q01 .. 

m tone 
㈣ 


Make suv-c *t^c 

M 

七 he value of [ 

ihc dapabiliiy 

-fvom dcv'idc- 


Wc 七 es 七七 he 

灼七 value -P\ror» 
七 he device aja’ms 七 
the value y/c 
dubious dbou^t- 


This function 
returns a TRUE or 
FALSE (Boolean) 
result — whether 
or not the given 
test passed. 


V 


The y\3n\c <y (- the 
capability -to tes-t 


dowfav-\soy\ 
OfCV-a*toV- 


The value {jo -tes-t 


i nc vdi 

I ajai^s-t 


function device_match($capability, $comparison, $value) 
global $device; 
if (!$device) { 
return FALSE; 

} 

$device_value = $device->getCapability($capability); 
switch ($comparison) { 
case ': 
case '===' : 

return ($device_value === $value); 
case '!=': 
case '!==': 

return ($device_value !== $value); 
case ': 

return ($device_value >= $value); 
case ': 

return ($device_value <= $value); 
case '>': 

return ($device_value > $value); 
case '<': 

return ($device_value < $value); 
case 'LIKE': 

return (strpos($device—value, $value) 
case 'NOT LIKE': 

return (strpos($device—value, $value) 
default : 

return FALSE; 




FALSE) 


FALSE) 



device—classes.php 
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dig deeper 


Whafs going on m that switch statement? 

fdcvitc^valuc is value -t^c tapab'>l*>*ty 

e^uCS*tio\r\ or\ *t^C £.uVV"Cirv*t dcvidC- 


Pepcid 

tom\>av-*isor\ 
ofcv" 3 *tov- sufflicd ； 
•bKc values av-c 
tomfav-cd m 
d»*f-fcv"Cir\*t v/dys. 


($device value 


switch ($comparison) 
case '==': 
case '===' : 

return 
case '!= 
case ' != 
return 
case '>= 
return 
case '<= 
return 
case '>' 
return 
case '<' 
return 


$valiae) 



($device—value !== $value) 
($device—value >= $value); 
($device—value <= $value); 
($device value > $value); 


/value is value 
y/c d like *to tes-t 
aja'mst 


a^d NOT 

L| 炫 allow us -to 

do 咖 b (subs-tv-m^) 

($device value < $ value) ; ^ tow\fav-*«soir\s. 


case 'LIKE': 

return (strpos($device—value, $value) 
case 'NOT LIKE': 

return (strpos($device—value, $value) 
default : 

return FALSE 

} 


FALSE); 
FALSE); 




Some examples 



TWis test passes 
TRUE) i-P dcvidcs 
V"CSolu*tio^__wid*t^ vsluc >s 
2_^"0 f'i%cU ov- smaller. 


I-P fdorwpairiso^ is ov\t o( 
the ytCo^Y\\zj^d domf>av*iso^ 
opc\ra-tovs, V/C "fail. 



device match('resolution width ', '<=', '240'); 


丁 his test passes i-f -the 
is__v/i\rclcss__dcvidc value *fov 
devide is ^alsc'. 


TViis itsi passes *»-f i\\c 
mob'llc_Jbv-oy/scv value 


device match('is wireless device ', 


,'false▼); 


device match('mobile browser ', 'LIKE ', 'Safari'); 
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Use the matching fuwctiow to test capabilities 


Now we have a function to test capabilities with. Time to convert our 
required capabilities into tests. 

Write a (PHP) function to test the individual device 
capabilities we care about in each device class definition. 

Translate each device class’s capability requirements into 

conditional (if/then) statements in code so we can determine 
which device class the current device should be assigned to. 

Write a simple test page (similar to our WURFL explore page) 
to see how different user agents get sorted into device classes. 


Reminder: The device 
classes we ended 
up with are desktop, 
tablet, higher 一 mobile, 
simpler 一 mobile, and 
unsupported- We figured 
out what to test for 
each in the pool puzzle 
on page 188 . 



We wrote that matching function for you, but now it’s time for you to do a bit of work. 
Which tests belong to which device class? 


if (device match('resolution width ', ▼>=▼, '320')) 


if (device match('resolution width ', '176')) 


if 

(device 

match('is wireless device','== 

= 、 'false')) 

if 

(device 

match('mobile 

browser ' t 'LIKE', 

'Safari') || 


device 

match('mobile 

browser ', 'LIKE', 

'Android')) 

if 

(device 

match('cookie 

support 、 '===', 

'false')) 


if (device match('is tablet ', '===', 'true')) 


if (device match('ajax manipulate dom ', ’===', 'false')) 


if (device match('https support ', ▼===▼, 'false')) 


if (device match('resolution width ', ' 320 ')) 
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exercise solution 



§OLutlOH 


We’ve got these tests sorted! Now it’s time to convert them into grouped nuggets of real PHP 
code. Keep truckin ’！ 

This -Peels like it rwigh-t be av\ appiropviatc test 
\ 七 k desktop devi^ dass, but well be weedma 
广七 desktop b\rov/sc\rs i 瞻 edi 此 ! ly by I00U3 ^ 


hi—ev 一 mobile 


uhsuppovtcd 


desk-top 


一 mobile 


uhSu^o\rtcd 


tablet 






siry\pl C\r_jnr\olpilc 



if (device match('resolution width 1 , ', ' 320')) 


if (device match('resolution width', ’<’， '176')) 


if (device match('is wireless device ', 


if (device—match('mobile—browser 
device—match('mobile—browser 

if (device match('cookie support 


if (device match('is tablet'. 


! 丨 T TI^TT' » » 


LIKE 

LIKE 


! 丨 T TI^T7 ! » 


, 'false') 

Safari') | 

Android *)) 


false')) 


, 'true▼)) 


if (device match('ajax manipulate dom ', 




1 , ， false ，）） 


if (device match( ! https support'. 




，，， false ，）） 


if (device match('resolution width', ▼<▼, ' 320 ')) 


Time to put the 
code together... 
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%|j^rpen your pencil 


Comfortable with PHP code? See if you can plunk in the missing 
pieces of the code chunk here. These are the device class tests, 
grouped and ready to go. 


! V 


$device_class = NULL; 

if (device_match('is_wireless_device ', 
$device_class = 'desktop'; 

} 

else if (device—match(*https—support', 

device_match(' —support', 

device—match('ajax—manipulate_dom', 

device_match ( '. ' , | 

$device_class =' '; 

} 

else if (device—match('is_tablet', ! ===',' 

$device_class =' '; 

} 

else if (device_match('is_wireless_device',' 
device—match('resolution—width', 
(device_match('mobile—browser', 
device—match(' .▼, 

{ 

$device_class = ' 

} 

else if (device match('is wireless device', 


▼ )) 


! T 


! ! 


! ! 


•…. ▼ ) I I 
.：)II 

'false') 
176 ，）） { 


▼ )) 


>: 


▼LIKE* 


true') && 

....，）&& 

'Safari') 

Android▼) 


)) 


， ）&& 


device_match('. 

$device class = 'simpler mobile'; 


f 1 / f ! 


<▼, 


▼ )) 
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tests at the ready 



rpen your pencil 
Solution 


All right, now we have our tests! 


$device class 


NULL 



ahd -Povcmos-t ： is -this 
CVCh a mobile blrowscv*^ 


if (device—match ('is—wireless_device ' , ' === 1 , 

$device_class = 'desktop'; 

} 一 

else if (device—match ('https—support', ' 二二 二 ， ， 

device_match ( 'cooV\t —support', ' 二二二 
device—match('aj ax_manipulate_dom', 

device match ( ' \rcsolu*tioh width ' , ' < ' f 

— 

$device_class = ▼ uhSuppo\rtcd '； 


-false f )) { 


心 Ise ▼) I I 
Use ▼) I I 

:==I , ▼ false I ) 

176 ，）） { 


A 


else if (device—match('is—tablet 
$device class = ▼ tablet ▼; 




UC 


)){ 


s 


Make suv-c W\\s device 
docs^t latk ouv- basclmc 

a iakld? 


else if (device—match('is—wireless_device', 
device match('resolution width *,'> 


'true') && 

▼ IZO 1 ) && 


(device—match('mobile—browser', 1 LIKE ， ， 'Safari▼) || 

device_match ( ' mobile 一 browser ’ ， ’LIKE' , 'Android 1 ) ) ) J 

Or avc *i*b bv-oy/sc\r 


$device_class = ' hi 咖 r 一 mobile '； 

} 一 

else if (device—match ('is—wireless_device 

device match ( ' \rcsolu*tior\ y/id*th 1 ,' < ' 

— 

$device class = 'simpler mobile'; 


ar\d v-csolutioir\ 

fv-c*t*ty awesome? 

▼ === 、 ' true ’ ） && 

HO 1 )) { 

O^aybc i^s good Chough 

but 〜 tUg - edge. 



All right! Two out of three! We’re almost done now! 


Write a (PHP) function to test the individual device 
capabilities we care about in each device class definition. 

~T Translate each device class’s capability requirements into 

conditional (if/then) statements in code so we can determine 
which device class the current device should be assigned to. 

Write a simple test page (similar to our WURFL explore page) 
to see how different user agents get sorted into device classes. 
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The home stretch 

Time to pound the last few nails into our device class testing project. 
We want a page with a simple form that will take a user agent and spit 
out which device class it matches. As this is super similar to what we 
did for the WURFL explore page, we’ve done it for you (yippee!). 


TWis simple *tcs*t 
is Coded -^ov* 

you'm ’mde % 十 


Device Class Testing 


Tost thio user agent string: 

g ^^； t0Sh： OS X _ Appi 義 t/S34 •靡 ML> |ike _ ChrW2 () . 742 . 122 Safafi/534 , 30 - 


Device Class Data 

TV page displays the 〜 Device ID: 'google_chrome_1 ' 

devide ID 釙 dthe ^^ DeviceClass：，desktop， 

dtM\tt dlass (o\r 

the Chtc\rcd USCV- agcht 



index.php 


Drivq 


O Put code into the device_classes.php file. 

Add the tests from page 196 into the file after the 
device—match function and save it. 

o View the index.php file in a browser. 

By default, the page will show you the device class 
assigned to your current browser. 

o Test some different user agents. 

Enter the user agents here into the form field to see 
which device class they get assigned to. 


Mozilla/5.0 (PlayBook; U; 

RIM Tablet OS 1.0.0; en- 
US) AppleWebKit/534.8 + (KHTML, 
like Gecko) Version/0.0.1 
Safari/534.8 + 


PantechP2020/JIUS05172010R; 
Mozilla/5.0 (Profile/MIDP-2•0 
Configuration/CLDC-1.1; Opera 
Mini/att/4.2.19039; U; en-US) 
Opera 9.50 


BlackBerry8330/4.5.0.77 Profile/ 
MIDP-2.0 Configuration/CLDC-1.1 
VendorlD/105 


BlackBerry9300/5.0.0.794 

Profile/MIDP-2•1 Configuration/ 

CLDC-1.1 VendorID/245 
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testing time 


Well, Icfs see...how'd it go? 


Good! 



Device ID: [ rim_playbook_ver 1 r 

Device Class; 'tablet 1 


This Rl/l/l Pbybook 
was 

idchti-Picd as a -tablet 


Good! 



Device ID: r pantech_p 2020 _ver 1 r 
Device Class: 【 simplerjnobile 1 


TKis Pa 士 A smavtfKo^c 

^ual'i^'ies as simplev ■ 一你 obile 
bcdausc of *rb smallcv- strttv\- 


Uh oh! 

Device Class Data 

Device ID; f bIackberry 9300 _verl 

Device Class: r, 


Uh oh,’ This usc\r agcht d\d^i 
«\uali-Py -Po\r a^y device classes/ 



Good! 

Device ID: r b I ackbe rry 8330 _ve rl _su b 45077 _ 105 E 
Device Class: linsupported r 


TWis BladkBcv-v-ys bv-owsev- is old , 

⑽ u# (wsicm 午弓） *i*t docs^t Thai is, i-t docs^i have 

allow of *tV^c POM 一 ^ "the kmd of JavaScript 

after fay is loaded- suppov-t v-c^uivcd- 



Why did the user agent for the 
BlackBerry 9300 (Curve) fail to 
match any device classes? 


Looks like something went a bit wrong 

The problem is that this Curve has a resolution of 320 pixels (meaning it’s too 
wide to qualify for the simpler—mobile class), but does not have a WebKit 
browser (meaning it fails to qualify for higher_mobile). This is going to be a 
problem for other devices that have higher resolution but non-WebKit browsers. 

We need to fix this and make sure our device classes don’t have any other logical 
holes that devices can fall through. 

Filling w the gaps 

We have three options for how to fix the higher-resolution-but-non-WebKit-browser 
situation: 

‘oupmg by vesolu-tioh 
: by b\rov/sc\r 


o We could create a new device class to handle this combination. 

❺ We could change the h i ghe r_mob i 1 e device class to allow for 
other, non-WebKit browsers. 

❺ We could edit the simpler—mobile device class and remove t 
240-pixel resolution maximum. 


Each option is totally valid. We have to decide which seems most ideal for the 
Acedlt! study aid website. 
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Joe: Do we really need to add yet another device class? Seems like a 
lot to wrangle. 

Frank: I agree. We need to strike a balance between nuance and 
the number of device classes we have. It feels like we already have 
about the right number. 

Joe: So, what now? 

Frank: OK. The problem is that higher-resolution devices that 
don’t have WebKit browsers are falling through and not getting 
assigned to any device classes — 

Joe: Aren’t there actually two problems here? One, we’re not 
thinking through what experience those devices should get, like you 
said. But we also don’t have a fallback, default device class overall. 
Seems possible something could go wrong with device detection or 
there might be something else we’re not thinking of. I think we need 
a sort of safety net device class. 


Frank: Good point. For the first problem, if we’re not adding a 
new device class, we need to fill the gap. The question is: what is 
more relevant here, device resolution or browser capabilities? 

Joe: Acedlt! puts a lot of focus on the interactive elements of the 
site — that suggests browser capabilities matter more. But at the 
same time, we were planning on delivering smaller images to those 
lower-resolution devices. 

Frank: I think you’re right about Acedlt!’s priorities. How about 
this for a compromise? We update the device classes such that there 
isn’t a top-end resolution restriction on the simpler—mobile 
class. 


That does mean that some higher-resolution devices get a 
simpler feel, but if I recall correctly, the dev team working on 
the touch-optimized flashcards is using a framework targeted to 
WebKit-based browsers. Heh, in fact, I think that’s why we were 
testing for WebKit browsers in our h i ghe r_mob i 1 e class in the 
first place. Wow, I need to get more sleep; my memory is failing me. 

Joe: What about images? 

Frank: I think we’d do fairly well if we gave all mobile devices 
mobile-optimized images that aren’t any bigger than 320 pixels in 
any dimension. Then we can use responsive image techniques to get 
us through the final mile on the device. 
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retest the user agent 


Fill m the gaps m the device class tests 


Here are the changes we need to make to our device class tests: /Remove this | 七 

代如纤 ioh 4\r si 呷 I 饮一州 乩心 


$device_class = 'higher—mobile'; 

} _ _ 

else if (device_match('is_wireless_device',' 
device match( T resolution width ' ,~~' <' r 
$device class = 'simpler mobile'; 



：iOh 


,' true ') 赫 
▼320,） ) { 


else { 

$device 


'desktop'; 


Add a fallback 
dc-faul*t devide dlass. 



Cav-c-fub 
\rcmovc ov\t 


device—classes.php 



Tqst DriVq 


Make the changes to the device—classes.php file and retry the user-agent strings from 
page 197 in the test form. 


nV' 

Kla 乙 kBe 汁 y use^ 
^9Ch-t how 匕 hes 

■the sirv»p| C \r__rhobilc 

device 乙 | ass 一 


Device Class Testing 

Test this user agent string: 

BlackBerry9300/5.0.0.794 Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorlD/245 

[Test User Agent 

Device Class Data 

Device ID: 'blackberry9300_ver1 1 
Device Class: 'simpler_mobile' 


200 Chapter 5 



















device databases and classes 


Make something actually happen 
with device classes 

Time to take the device classes we’ve cooked up and get cracking. 


The goal: deliver different flavors of the landing 
page mockup to different users based on device 
classes. 


We’ll use our code to sort devices into device classes and deliver 
different versions of the current Acedlt! study-aid-site mockup to 
different devices, using the wireframes we whipped up on page 184. 



Copy the configuration file from the last 
exercise into the adapf_co/ife/if folder. Yep. 
Again! This is the last time, we promise. 


The HTML and CSS we’re dealing with here is pretty basic: 
Acedlt! is still in the early phases of development on the new site, 
and so we’re working with some pretty barebones mockups. 

Well treat unsupported devices similarly to 
desktop browsers...for wow, at least 

We’re going to deliver content to the unsupported device class 
that is basically the same as the desktop content, but we’ll 
explicitly eliminate links to the interactive flashcards section of 
the site and the online store. We’ll also not deliver Flash content 
to unsupported devices. 

o 


It’s getting a bit late, and we’re all 
tired: to save you some time, we 
did a lot of this for you. 

We’re going to walk through how we did 
it over the next several pages, but we’ll show you where to 
find the finished code. 




adapt—content 



V®u\r doh-Pigu\ratioh -file 


config.php 



Device OY\ 

•file: all veady -Pov- you 


device.php 

TKis is i\\c device dass 
to&t wc jus 七 

厶 “ d uf (already 

device_classes.php -fov- you). 




index.php 

- This page allows you io 


test.php 



us ^ agcht so that 
y°J ； v, cw ihdcx.php as 
di-r+cv-chi devils. 


styles 



common.css 



desktop.css 



CSS -fov 

devide classes. 


mobile.css 



mwebkit.css 
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content delivery 


c^Sl^rpen your pencil 


The starting point of index.php has all versions of the content (for all device 
classes) in it. It’s time to identify which pieces of content will be delivered 
(or not delivered) to users who fall into our different device classes. For each 
number below, find the corresponding markup on the right and fill in the 
blanks with the appropriate device classe(es). 



Use this doctype for the 


device class. 


❺ Use this stylesheet for the 


,and 


device classes. 


❺ Use this stylesheet for the 
device classes. 


and 



Use this stylesheet for the 


device class. 


❺ Show this version of the navigation for the. ， . 

.device classes. 

o Do not show these two links for the .device class. 


,and 


202 Chapter 5 
















device databases and classes 


Here’s the markup from the index.php file. Use it to answer the questions on the 
page at left. 


▼-//VOCV/DTD XHTML Basic 1.1//EN" 
http :// www.w3.org/TR/xhtml-basic/xhtml-basicl1.dtd n > 


<!DOCTYPE html PUBLIC 

o 


<!DOCTYPE html> 
<html> 


i 

index.php 


<head> 

<title>AcedIt! Study Aids</title> 

<meta http-equiv= n Content-Type" content= n text/html; charset=utf-8 n / > 

<meta name= M viewport" content= n width=device-width f initial-scale=l f 
maximum-scale=l ▼▼ / > 

❺ 

❺ 

o 

</head> 


clink rel= n stylesheet" type= n text/css" href= n ../assets/common.css" / > 
<link rel= n stylesheet" type= n text/css" href= n ../assets/desktop.css n / > 
clink rel =l 'stylesheet" type= n text/css" href= n . ./assets/mobile . css" / > 
<link rel= n stylesheet" type= n text/css" href="../assets/mwebkit.css" / > 


<body> 


<div id= n header n > 

<hl>AcedIt! Study Aids</hl> 
</div> 

<div id= n navigation"> 

<ul> 

<li><a href 二 
<li><a href 二 
<li><a href 二 
<li><a href 二 
<li><a href 二 
</ul> 

</div> 


Psst..*thc §tudy Kow sWioh 
is the JavaS^ip-t- 


# n >Home</a></li> 

#">Shop Online</a></li>^^ 
#">Study Now!</a></li> 
#">Contact Us</a></li> 
#">FAQ</a></li> 



► Continued on next ㈣ e. 
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still queuing 

— i^kirpen your pencil_ 

Oh, you thought you were done? At least you’re halfway there! 


o Deliver Flash content to the. device class. 


o Don't use Flash for the . ， . 

. ， or. device classes. 


o Don’t show these sections for the. or 

device classes. 


❿ Show this version of the navigation for the. and 

.device classes. 


0 Hide the link to the interactive flashcards for the.device class. 
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index.php 


<div id= n intro n > 

<p>Morbi non erat non ipsum pharetra tempus. Donee orci. Proin in ante. 
Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet 
urna sit amet risus...</p> 

</div> 

<div id= n feature"> 

<div id= n featured_product n > 
o <p>Featured product Flash slideshow.</p> 
o <p>Static featured product image.</p> 

</div> 

</div> 


I 七 ， s ^obdblY obvious, W 七 these 
a\rc just fla^oldw [AY\h\ 
flasV> movie and 命以七 

av-c developed- 


<div id= 

n ads n > 

參參* 


</div> 


卜 div id= 

n fromtheblog n > 

• •參 

</div> 


<div id= 

’ ▼navigation ’ 1 〉 

<ul> 


a bit ihc text 
^Ohtcht io save syau heve oh 
this page. 


© 


<li><a href: 


<li><a href: 
<li><a href: 
<li><a href: 
<li><a href: 
<li><a href: 
</ul> 

</div> 


#">Home</a></li> 

#">Shop Online</a></li> 
#">Study Now!</a></li> 
#">Blog</a></li> 
#">Contact Us</a></li> 
# n >FAQ</a></li> 



<div id= n footer n > 

<p>Current device class : <?php print $device_class; ?></p> 
</div> 

</body> 

</html> 
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code conversion 


i^arpen your pencil 

Solution 


Time to look at the markup differences for the different device classes and 
convert our decisions into code. 


❶ Use this doctype for the . P—— 巧?!?々 


device class. 


f’ll w XWTML-B 城 

mobile device class. 
Evcvyohc else gets 


<?php if($device 一 class == 'simpler 一 mobile'): ?> 

^<! DOCTYPE html PUBLIC ， ▼- "W3C//DTD XHTML Basic 1.1//EN" 
www.w3.org/TR/xhtml-basic/xhtml-basicl1.dtd n > 

<?php else: ?> 

<!DOCTYPE html> 

<?php endif; ?> 


"http :// 




❺ Use this stylesheet for the . dcskiop . ， .., and 

. ur\sup.poy ： ic(i . device classes. 

Retail wcVc unsiAfpovtcd 

device dlass—mos*tly—l>kc desk-top- 

❺ Use this stylesheet for the .. and ..device classes. 


❹ Use this stylesheet for the ..device class. 


£vcvyoir>c yb ap*tly 灼 amed 
dommor^-dss. 



<link rel= n stylesheet n 

<?php if ($device 一 class 
|| $device class 
❺ || $device 一 class 

<link rel= n stylesheet 

<?php endif; ?> 

^^<?php if ($device 一 class 
Vr || $device 一 class 

<link rel= n stylesheet 

<?php endif; ?> 
j^?php if ($device 一 class 

<link rel= n stylesheet 

<?php endif; ?> 


type="text/css" href= M . . / assets/common . css f, / > 


:='desktop' 

:='tablet' 

:='unsupported') : ?> 

type="text/css" href= n . 

： ='higher 一 mobile ' 

:='simpler 一 mobile ') : ?> 

type="text/css" href= n . 


/assets/desktop.css" / > 

Tlicv*c 3 v*c 匕 ommoh 七 o 

•mobile device classes *m -these styles. 

/ assets/mobile.css" / > 


'higher— mobile') : ?> 

type= n text/css" href= n .. / assets/mwebkit.css" / > 


TW,s V^as 心 Is a”d 。七 ^ 

械 Emulated U 祕七 Wo 或 
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T\,\s »s dcsktof-stylc 於狄 

*t^c *top -tiic fajc- 

❺ Show this version of the navigation for the. dcsk*(x>p . ， . tablet 

unsupported device classes. 

❻ Do not show these two links for the . 州邮阿 .id. .device class. 


<?php if 

($device 

class == 

'desktop' 

A II 

$device 

class == 

'tablet' 

U II 

$device 

class == 

▼ unsupported') : ?> 


<div id= n navigation n > 

<ul> 

<li><a href= n # n >Home</a></li> 


shopping ov* 

shdz^y -flash^avds -fov 
"these guys/ 


<?php if ($device class != 'unsupported') : ?> 


<li><a href= n # n >Shop Online</a></li> 
<li><a href= n #">Study Now!</a></li> 

<?php endif; ?> 


<li><a href= n # n >Contact Us</a></li> 


<li><a href= n # n >FAQ</a></li> 
</ul> 


</div> 

<?php endif; ?> 


and 


Q Deliver Flash content to the.. device class. 

❺ Don’t use Flash for the . M ?!? 大 . ， . 

.. ， or.. device classes. 


Flash 3hd mobile devils 
atch do^i pby we || 
"tojethev-. Di-fc-to -fov "tablets. 

.J 


<?php if ($device_class == 'desktop'): ?> 

<p>Featured product Flash slideshow.</p> o 

<?php else: ?> 

<p>Static featured product image.</p> 

<?php endif; ?> 


► Continues over tire pa^e. 
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who gets what? 



rpen your pencil 


Solution ads cm 如 mobile layouts, a^d 

UDIUtlOII ms ^. ca( j[ v^avmj bloj -teasers or^ i\\t pajc, v/c II 

provide a \\rk bo *t^c bloj subpage- 

❾ Don't show these sections on the .. or .… .device classes. 



<?php if ($device class == 
丨丨 $device class == 
^#<div id= n ads"> 

: , desktop' 

: , tablet') : ?> 


• •參 

</div> 

<div id= n fromtheblog"> 

參 • • 

</div> 


<?php endif; ?> 





This is "the mobile version o( -the ^dvi^a-tio^ 
dovm a*t "the botfcorw o*p -the pay. 


❿ Show this version of the navigation for the.. and 

.. device classes. m ^ a ^Wc -fov ^csc —mesf 

❿ Hide the link to the interactive flashcards for the. ” P!?” 一，叫 .device class. 


<?php if ($device 一 class 
|| $device 一 class 

<div id="navigation n > 
<ul> 


higher 一 mobile' 
simpler mobile') : ?> 


<li><a href="#">Home</a></li> 

<li><a href="#">Shop Online</a></li> 

<?php if ($device 一 class == ’higher 一 mobile ’）： ?> 

<li><a href= n # n >Study Now!</a></li> 个 
<?php endif; ?> V Ohly 3 iv C Uk h> 

<li><a href= n #">Blog</a></li> "the -fhsh^ds io -the 

<li><a href= n #">Contact Us</a></li> hijlic^__rhobilc d^ss 

<li><a href="#">FAQ</a></li> 

</ul> 

</div> 

<?php endif; ?> 
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Tesr DriVq - 

Try it out! Find the finished version of index.php in index—solution.php. 
Replace the current index.php file with index—solution.php. 


Navigate to test.php in your web browser and try some of the user-agent 
strings from the useful—user—agents.txt file to see the different device class 
versions. Hit index.php directly with your desktop browser to see the desktop 
version of the mockup. 




Acedlt! Study Aids 


Mofno Shop Online Study Nowf 

Morbi mm erat nan ipsum p/tanrtru tempus. 
Donee ord. Prvinin anre. Pdlenresque sit 
amcr P uru ^ Otw egestas diam sed ante. 

imperdiet umasit amet risus. Dorusc 
omarc arcuid erat. Miquam ultriecs 
scelerisque sem.Ineiit nuUa, moiesrieveJ, 
㈣ 奶!汾 amet, interdum vel, mauris. Eriam 
dignissim imperdiet metus. 


Contact Us 


Featured product Flash slideshow. 


Jiino* beard wnerkan apparti mro 
^^^tcher Satan irony dich«mu 

油 xJtesei trua fund dreamcatcher arttsan 
VHS，i b*ard. 


mi befof« th«y 

muter devise u 


sold out hefvetica 


Trust fund vegan PBR 

VH$utp«xt>-, bo^ksy craft beer 
'nay pad( wolf amoican apparel lomo tofu 
photo booth skateboard locanm potiland. 

New Jcvd mosenjeer ba« ♦ u tnut fund art 

IMity beard blog ctbkal Austin 


Lorem Ipsum 

onunv ami iderat. Ahquam 
utrioesfoeicHsqucsfm. 

Lorem Ipaum 

rtmar * arruid tras. AiiguoTn 
uftnaw torJtrisqut snn. 


Locvrore maria fixlo 


mliiamsbiijj ic„y 

wore thc> sold out Oumpiown rttd>nuic-. 
Org«nic kr>lAr mdymade fraes«n 3 wnolf 
hanh mi next level 


dc. 


: desktop 



We tightened up our device class tests on page 
200, but can you think of anything other risks we 
might not be considering? 
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wurfl-ly generic 


Always tread with care and come prepared 

Way back in Chapter 3, we highlighted some pitfalls of server- 
side device detection using user agents. There are some risks that 
you should keep in mind: 


o Browsers don't always send accurate user agents. 

Sometimes the user purposely overrides what user agent gets 
sent, and sometimes browsers just send weird ones. This could 
cause a device database to return inaccurate data. 


❺ WURFL doesn't always find a (specific) match. 

WURFL doesn’t always find a successful match, or any valid 
match whatsoever. You might get a generic device ID, or 
nothing at all. 



this! > 


Go back to the explore page we created earlier in the chapter and enter the 
following user agent: facebookexternalhit/1.1 (+http : // 
www.facebook.com/externalhit uatext.php). 


WURFL's "generic" is pretty generic 

If you tried out the f acebookexternalhit user agent in our explore 
page (and if you didn’t, do it now!), you will have noticed that WURFL 
identifies it as device ID generic. This is WURFL’s way of shrugging its 
shoulders and saying, “hey, I tried, but I just don’t know what this puppy is.” 

So what? 

The values for capabilities for a generic device aren’t meaningful enough 
to base decisions upon. It’s unlikely that the f acebookexternalhit 
client has a resolution—width of 90 pixels, for example. That just 
happens to be the value that our WURFL data file has for generic devices. 
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Wc need a bigger safety wet 

When designing a site that uses server-side detection, take some time 
to think through how the site will behave if a generic ID is returned, 
or if the device fails to match at all. Hint: It should still work. 

Accidental success is wot good enough 

On the Acedlt! study aid mobile test site right now, user agents that 
result in a generic device match will receive the unsupported device 
class (try the f acebookexternalhit user agent to see). This 
is not an inappropriate device class to assign, but the assignment is 
kind of happening via dumb luck. 


display 


physical_screen 一 height 

columns 
dual_orientation 
—physical 一 screen_width 

rows 

maxjmage_width 
resol ution_height 
resolution_width 
^axJmage.height 



pcla'»l <^f ouv 代 pay. TKc ^cr\t 

values U -tKc dis^laY yro^ a^rc 
y W • 己一 v/C S^ould^-t Oh tKcm. 



WURFL data can vary a bit. 

Let’s compare the facebookexternalhit 

capability data in our explore page against 
the data in the ScientiaMobile explorer. 


Visit http://www.tera-wurfl.com/explore and enter the 
f acebookexternalhit user agent. The first thing to 
note is that the Database Edition’s variant of the generic 
device ID is called generic 一 web—browser. 

If you explore the capabilities returned for a bit, you’ll 
find more differences. For example, take a look at the 
display capability group and compare it to the display 
capability group values for our “generic” device ID above. 

Pretty different, huh? It’s smart to get familiar with our 
flavor of WURFL (the PHP API, file-based variant), and 
it’s a good idea that we have our own explore page. 


-fvow' SdcyrbaMoWc 
-fa^kookc^halW«-t usev 


display 

physTcafJscreennheight 

^00 

columns 

120 

dual 一 orientation 

false 

physical_screen_width 

400 

rows 

200 

m ax」mag e_wi dth 

600 

resolution_height 

— 

resolution_width 

V soo 

max_tmage_height 
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what if there’s no device at all? 


A stitch iw time 


The PHP API provides a few methods for determining how 
specific a match was. Let’s take a peek. 


/-P thcvc is ho 

device It) ai a |L. 


4 



if (!$device->id 

|| (!$device->isSpecific() 

&& $device->fallBack === 'root')) { 

/* FAIL--make sure you have a plan for this situation */ 


Or \s Kas ^allc^ kadk 

all v/ay -to -tV^c ^roo-t dcv.tc 



That seems overcomplicated. 

Why carVt I just test for a specific 
match and be done with it? 


Two reasons: error-checking goodness and 
the desktop browser patch. 

Checking for the lack of a device ID overall feels like good 
housekeeping. We’re being tidy. 

The desktop browser patch we’re using with WURFL 
allows us to get basic information about desktop browsers 
as well as mobile ones. 

However, all matches for desktop browsers will return 
FALSE for isSpecif ic (), as the data in the patch 
isn’t considered specific. By checking the fallback and 
making sure it’s not root (generic), we can avoid falsely 
identifying desktop browser matches as failures. 
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tWeiare no o 

Dumb Questions 


What is this desktop browser patch of which you 
speak? 

The default installation of WURFL comes with a patch 
that will identify, broadly, a set of desktop browsers as well as 
mobile browsers. 

I don’t understand what parts of WURFL are the 
API parts. 

WURFL itself is just the data. The API is all the code 
that interacts with it, organizes it, and so on. There are APIs 
for several major programming languages. 

What does the facebookexternalhit user 
agent mean, anyway? 

When someone shares a link or whatnot on Facebook, 
Facebook often goes and fetches some content from that 
page, and/ora representative thumbnail-ish image. This is 
the user agent it uses when it does so. 


Wouldn’t the device class testing code be better as 
a function/object/whatever? 

It sure would. In real life, for real projects, the code 
would likely be more elegant, more organized, and more 
powerful. We're just showing you the basics here. 

Excuse me, but if I am not mistaken, the 
$ device variable is global. That’s stinky. 

See above. 



Update device_classes.php in the adapt_content directory to include a test for generic IDs or 
lookup failures. Assign the unsupported device class in this case. 
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content-adapted ribbon 



$device_class = NULL; 

if (!$device->id || 

(!$device->isSpecific() && $device->falIBack === 'root')) { 

$device_class = 'unsupported'; 

} 一 

else if (device_match('is_wireless_device ', ’===', 'false')) { 

$device_class = 'desktop'; 

} — 同 

device—classes.php 



Congratulations, you’ve 
mastered wrangling device 

capabilities and classes. 


It’s a complex concept — and you made it! You even have 
a content-adapted web page to prove it. Good work! 



edit! Study Aiffl 


cawikM. 


ZZes.ue sit anret^u, Cras 

i o ; r 二•一一 et 

metus. _. 


Static 


featured product image. 


Home 


Shop Online 


Study Now! 
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O 



How do I make a choice between server-side 
detection, which can trip up on bad or mysterious 
user agents, and Responsive Web Design and 
feature detection, which doesn’t have full support 
in all mobile browsers? 



It doesn’t have to be one way or 
the other. You don’t have to throw 
RWD out the window when you use 
server-side device detection. 

Some very handsome things can be accomplished 
with a combination of the two. Each has its pros 
and cons. Making the two dance in harmony is 
part of what we’ll look at in Chapter 9, as we look 
to the future. 


BULLET POINTS - 

■ Device data repositories like WURFL (Wireless 
Universal Resource FiLe) allow us to get at very detailed 
information about a whole lot of devices. 

■ WURFL data contains over 500 capabilities per device, 
organized into a couple dozen groups. 

■ We can use a device database to identify a value for a 
given capability and act upon that value. 

■ WURFL’s PHP API is one of several APIs for interacting 
with WURFL data. Different APIs handle and represent 
the data slightly differently. 

■ ScientiaMobile was founded in 2011 by some of the 
original WURFL maintainers. The company provides 
open source and commercial licenses for WURFL. There 
are alternatives if WURFL doesn’t work for you. 

■ When working on larger projects, it can be helpful to 

group relevant capabilities into device classes. 


■ Device classes are abstract groupings of devices based 

on common capabilities. 

■ By slotting a device into a device class, we can take 
further action upon it (e.g., delivering adapted content) 
without having to track individual capabilities constantly. 

■ It’s important to build in default device classes, error 
checking, and generic device handling into any code 
that uses a device database for identification. 

■ Like nearly everything on the Web, server-side device 
detection is not a 1 00% bulletproof concept. 

■ Server-side detection and content adaptation can be 
married with client-side adaptation— the two are not 

mutually exclusive. We’ll be looking into this more later. 
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6 build a mobile web app using a framework 


+ Th ^ 她的< 


HTML5, C553, JavaScript, 
mobile frameworks...They 
sure don’t make tartans like 
they used to. 


“We Want an app!” Just a year or two ago, that hallmark cry generally meant 
one thing: native code development and deployment for each platform you wanted 
to support. But native isn’t the only game in town. These days, web-based apps for 
mobile browsers have some street cred — especially now that hip cat HTML5 and 
his sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into the 
mobile web app world by taking a mobile framework — code tools designed to help 
you get your job done quickly — for a spin! 
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decipher buzzwords 



Just like the term Web 2.0 a 
few years ago, HTML5 and app 
are the buzzword darlings of 
media and Internet folks alike. 

The terms mean different things to 
different people — a free-wheeling 
semantic party that can be exhilarating 
or frustrating. 

As a web dev, you may already have eager 
customers beating down your doors asking 
for HTML5 and web apps specifically. 

So, what is it that they’re really 
asking for? 
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build a mobile web app using a framework 


HTML5...app...what do these words cvew meaw? 


HTML5 is a specific thing... 

HTML5 is a specific thing. It’s an in-progress standard, an evolution of the HTML 
we know and love — the language without which there would be no Web. HTML5 
clarifies and improves upon the two-decade-old markup language, adding, 
especially, support for web apps without putting much backward compatibility 
at risk. 

HTML5 introduces new semantic elements like 〈 section > ， 〈 article >， 
<nav>, and <header>. It simplifies the syntax for some tags, gives us the 
power of media with <audio〉and <video> tags, and unleashes interactivity 
through new JavaScript APIs like geolocation and offline storage. 


HTML 


..but it has come to represent wore 

When people say HTML5, they often mean the combination of HTML5 itself, 
super-swanky JavaScript, and CSS 3 goodness — in short, the core pieces for 
building modern, interactive web applications. 




t yjcr oy\ 


Web- 


\s, well, 

a bii mislcadihg. 


"and what exactly, is a web app? 

What about the web app part of an HTML5 web 
app? HTML5 is a confusing enough term, but 
with the word app, you’re stumbling into even 
murkier territory, full of dragons and discord. 

You can usually look at a website in a browser 
and have an sense of whether what you’re 
looking at feels applike or not. An emphasis on 
accomplishing tasks, a layout that fits on a single 
screen, actions that don’t reload the whole page, 
interactivity — all have been proposed as criteria 
for what is an app versus what is a regular ol’ 
(content-centric) website. 

In short, no one has ever defined the word app 
in a way that makes everyone happy. 


Wet apps are karct to 
cteline, l>ut tkey skare 
certain interactive 


ckaracteristics tkat 
are well suited lor tke 
strengtks of HTML5 
amt its complementary 
tecknologies. 
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bloated page loads 


How "traditional" websites typically behave 

In a traditional website model, a request for an HTML page retrieves 
all of the components of that page 一 the HTML itself, JavaScript, 

CSS, images, etc. 

Browsers are often good about caching elements, and web servers 
can be configured to encourage additional caching. But this model 
means that each interaction — form submit, link click, whatnot — 
results in a full-page load. 


First page request 

T\\t d’wt \rc<\ucs*ts a 

pay -fv-OW> SCV"VCV". 

client 


^eed ^is web page, p/ eQSe 


000 如 



、 her 


e you go. 


The downside to this — especially when it comes to 
mobile devices with limited concurrent HTTP requests, 
bandwidth, and processing power — is that it means 
requesting and downloading assets the browser may 
already have downloaded before, and encumbers the 
browser with re-rendering content and reprocessing code 
that might not have changed. It also feels less interactive. 



广 d : HI 

load I 七 


Subsequent requests 


v,a ^ ^ Q more inforinat/ 0 ^ 

^ ^ I fctf 1 ■ — 


client 


Cliwb tadiic some 

(bu*t y\o{, all)- 





匕 her 


e you go. 





These -PulI-page loads 
less ihtcirad-tivc 
3hd dpplike. 


served as 

•，- f bv-oy/sev- a^d scv-vcv- had 

bdoVC. 
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build a mobile web app using a framework 


How applike websites often behave 


In a more applike model, the client tends to play a bigger role, and fewer 
assets are bandied around in each request. Reusable markup, code, and 
assets can be stored locally. Requests for changed content or data can be 
made asynchronously using AJAX. These behind-the-scenes asynchronous 
requests pull in specific content or assets without causing a full-page reload. 

Requesting only relevant pieces of content and not reloading the entire page 
reduces bandwidth and processing, and improves the sense of interactivity. 


A loi c^p -this ih-tcirad-tivc 

r ，ih L 9 iS ^plishcd ih^ouah 
^yy)dh\rohous \re^ucsis. 


First page request 

The dicyrt \rc<\ucs*b a 

pay -fv-om SCV"VCV 


client 




this web page, p/ eQ 




I 



Cemtaih assets (images, data, 
JS) cay\ be saved loyally ^ 
latcv* oy o-PflihC use. 


VdV*IOUS of pay.. 

..扣 d ofic some special 

about whi^h 
assets *to ucMt. 


Subsequent requests 


as7^ov>ous yrc<\ucsts (AOA/) 

^ e ed a blt more inforrnQ ^o n 

^ i j^r - --- - - 




here you go 

Response COYyityyi 
bc ^iricd ihio ah 

cx,s ^ ih 9 p^3 c ' s t>OM. 


t 


OY\St 


server 

C^y\ be Inerted "to 
sfct'i-fit do 士灼七 needed, avo'id'mj 

ba^av»at)i a^a ^ousso^ 
dos*U 3 — pay vcload- 
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turn the web tartan 


A Tartans Unlimited mobile HTML5 web app 

Tartans Unlimited is an international organization that’s trying to 
keep the history and culture surrounding Scottish tartans alive in 
other parts of the world. 




I have an idea for a web 
app I want to build. If 11 let users find 
information about us, but—this is more fun- 
find and share and maybe even create their 
own tartan patterns. 
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page 
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Events page 

-If would be nice if the app 
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build a mobile web app using a framework 



Jill: Hey guys, I know the requirements are pretty vague. When I 
talked to Ewan, I got the sense that there are two main things he wants 
to accomplish with the site... or app, or whatever. There’s a chunk 
of content pages: info about the organization and education about 
tartans. Then there’s this whole section he’s calling the Tartanator — 

Joe: The Tartanator? Seriously? Heh. 

Jill: Yeah. Actually, it seems he wants to call the whole site that, not 
just one section. Anyway, it seems like it’s sort of a combination of a 
browsable listing of tartan patterns to explore and, he hopes, a way for 
users to create their own tartan patterns using a form — 

Frank: Wow. That sounds simultaneously bizarre and daunting, but 
possibly fun as an implementation challenge. 


Joe: OK, content pages, Tartanator area.. .what about this note about 
an Events page? 

Jill: Hold your horses! I’m getting there! We’ve decided to do this 
project in two rough phases. For the first phase, we’ll build basic 
structure for the content pages and implement the tartan listing. He’d 
also like us to think about how an interface for users to create their own 
tartans would look, and maybe prototype the frontend of that. 


Joe: So, like, we’d build the form for creating a tartan, but it doesn’t 
need to do anything yet? 



dime 乙 "tov~y 




tav-tah 


dlavx / 


Jill: Something like that, yes. In phase 2, we’ll make it actually work, 
and we’ll also come back and work on an Events section. 


Frank: OK, sounds like we need to go start building a mobile web app. 


if siait 
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the tartanator project plan 


The master plaw for phase 1 of the Tartawator 


Build content pages and site structure. 

We need to create basic sections and pages and create an 
overall structure. 


Wcircs what 
y^ced {o do^ 


Create the tartan listings. 

For the first phase, we’ll create a listing of existing popular 
tartan patterns. The tartans section should be a browsing 
interface that — of course — looks and feels applike and 
mobile oriented. 

Build a prototype of the tartan-building form. 

Ultimately, Ewan would like users to be able to construct 
their own tartans by using an applike mobile interface. He 
wants to see what that might look like, so we’ll whip him up 
a prototype. 



So, were supposed to build a mobile web app with 
HTML5 and stuff. I have no idea where to begin. 

Do I have to build all of this from scratch? 

- - - 卜 - 广 

Well, you could build an app from scratch.., 

If you’re up to speed with CSS, HTML, and JavaScript, 
learn how to put them all together to create awesome web 
apps with Head First HTML5 Programming. 


^Brain-Priendiy Guide 



Buy it »仏 T\\t best 

ttTML^ book 

on mav-ket Seriously, you 
l0r\o>/ you wd 灼七 * to- 

0^, Chou^li 
how. — Bd. 
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...or you could use a mobile web framework 

To build phase 1 of the Tartanator, we’re going to turbo-boost our web aptitude 
by using a mobile web framework. 

We’ll still be using our HTML and CSS chops, but a mobile-oriented user 
interface framework can help us get our job done faster. 


Why use mobile web app frameworks? 


Let’s face it. Building complex, interactive web apps from scratch — especially 
mobile web apps — can be a daunting proposition. A web development 
framework — that is, a packaged collection of interactive elements and code 
tools — can help give us a leg up. 

o A framework can help us make a website or app 
look mobile-friendly. 

Mobile-oriented frameworks generally help alter and 
style HTML elements to look and feel more mobile, often 
saving us quite a lot of time. 

❺ A framework can help us make a website or app 
feel mobile. 

Frameworks can take the drudgery out of transitions and 
effects that make a website or app feel more native, or, at 
least, consistent. 

o A framework can help us manage cross-platform 
inconsistencies. 

Framework developers keep on top of obnoxious or 
curious browser quirks that could really throw a wrench in 
things, working around them in the framework’s codebase 
so that we don’t have to. 



Depending on 
tke project, you 
itiigkt not want to 
reinvent at least 
some oi tke wkeels 
reejuirect ior an 
interactive wet 
app. Tliat’s wkere 
itioLile developitient 
frameworks come 
in kandy. 


Watch it! 


Choose and use web frameworks with care. 

Frameworks are powerful mojo, but they also have 
some drawbacks. Many are quite hefty, and can bloat 
your site’s payload by hundreds of kilobytes. Some 
employ a kitchen-sink approach, including tons of 
widgets and cutesy animations that not only are large in byte 
units, but can cause serious performance woes on lesser devices. 
Finally, make sure you evaluate a framework’s device support. 
Some only support one ora few major, cutting-edge platforms. 
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jQuery Mobile 


Our choice for the Tartawator: jQuery Mobile 


To build the Tartanator, we’re going to use the jQuery Mobile framework. 


jQuery Mobile is a user interface framework optimized for mobile devices. 
It’s built atop the immensely popular j Query JavaScript library. 



The reason we chose jQuery Mobile for this project is that it is pretty easy to 
use and has an architecture that maps well to our HTML5 focus — jQuery 
Mobile is designed in a way that hooks in easily (sometimes invisibly!) to 
well-formed HTML5 markup. 


Also, if you’ve ever used jQuery before, you probably know how intuitive and 
straightforward it feels. 



j^uevy /\/Iob*ilc, like all o( 
i\\t pirojedis, is 


open souvtc- 



Seems like we already have a hundred different 
ways to build stuff for the mobile web. Responsive 
Web Design. Separate sites. Using device detection or 
feature detection. Do I just forget about all of that 
stuff and start over with mobile web frameworks? 


You’re right. It’s a 
complicated landscape. 

Here’s where we trot out our tired 
Wild West metaphor about the mobile 
web. But it’s true. There are no simple 
answers, and pulling off complex 
feats on the mobile web often involves 
the cobbling together of several 
implementation approaches. 

So, no, don’t throw out everything we’ve 
already learned. None of the techniques 
we’ve covered so far is mutually 
exclusive, and each makes more (or less!) 
sense in different circumstances. 

L'i-Pc is C-omflc/*- So is 
*tV)C mobile v/cbf 
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build a mobile web app using a framework 


tJiereiare no ^ 

Dumb Questi9ns 


Are there other mobile frameworks out there? 

^\^lAnd how! There are more every day. Some other mobile web 
frameworks include Sencha Touch, Wink, iUI, DHTMLX Touch, and 
JQTouch. 

What exactly makes up a mobile web framework? 

It depends on the framework, but most involve a combination of 
JavaScript, CSS, and image (or other) assets to aid in the styling of 
the mobile experience. Some frameworks also include a server-side 
component to help generate (as opposed to adapt) content. 

Wait. What about zepto.js orXUI? 

Zepto.js (very lightweight JavaScript, with jQuery syntax) and 
XU I (also very compact JS) both fall more on the library side of the 
line (versus framework). Frameworks tend to have UI components, 
while libraries tend to be code—in this case, JavaScript—only. This 
is a grey area; the division between library and framework isn’t easy 
to define. 

So, jQuery Mobile is a mobile version of the original 
jQuery library? 

Not so fast, hotshot! jQuery Mobile builds on top of jQuery. It 
does not replace it. You’ll notice that when we start building stuff with 
jQuery Mobile, the first JavaScript file we include is the core jQuery 
library. 

So, jQuery Mobile is a JavaScript development framework 
that extends jQuery. 

Bear with us. Yes, there is JavaScript in the jQuery Mobile 
framework. But jQuery Mobile is not a JavaScript framework. It's 
bigger than that. It's a user interface framework. That means it also 
includes stylesheets, icons, and other pieces of the puzzle. 


Do we really need to use a framework? 

Do we need to? Technically? No, not at all! In fact, we 
encourage you to build applike mobile websites from scratch, if that's 
your bag. 

However, the nice thing about frameworks, and jQuery Mobile 
in particular, is that they take care of a lot of obnoxious, 
platform-specific quirks and bugs for us. Their team of devs has 
laserlike focus on the foibles of different mobile browsers. 

We have limited time and space here, folks. Trying to pull off what 
we need to do for the Tartanator without a framework of any sort 
would be pretty hairy, not to mention the chaos of extra testing that 
would be required (as we wouldn’t have that underpinning of tested 
cross-platform support). 

I still don’t get it. How is the Tartanator an app instead of 
a website? 

Because Ewan says so. No, really. The subtleties of 
differentiation between app and site are so vague that the answer 
sometimes seems almost arbitrary. 

Ewan has a vision of the Tartanator as a functional, web-based 
thing. His focus is on the ability to find and create tartans, and, also, 
ultimately, to search for relevant events. In his mind, that makes this 
an app. 

But what if it were a site? I couldn’t use jQuery Mobile 
then, right? 

jQuery Mobile is a user interface framework. It doesn’t care 
whether you call what you’re making with it an app ora site. Its job 
is to make things feel usable and not break across various mobile 
platforms, using a combination of CSS, JavaScript, and HTML5. 

But which mobile browsers support HTML5? 

No browser supports (all of) HTML5. Don’t panic! HTML5 is 
modular, and mobile browsers are increasingly supporting more and 
more pieces. Just as no modern desktop browser fully supports every 
single piece of CSS2.1, it may well be that HTML5 is never fully 
supported, exactly as it is in the spec, by every browser. Oh, and the 
spec is still evolving. The website http://www.caniuse.com is a good 
reference if you’re looking for info about specific feature support in 
HTML5 and the other major web technologies. 
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mobile-friendly markup 


Puild a basic page with jQuery Mobile 


□ 

chapter6 



aboutus.html 



The first stop on the Tartanator adventure is to learn how to build a 
simple page with jQuery Mobile so that we can start constructing the 
pages in the project. You’ll be surprised by just how easy this is. 

Start basic 

By starting with a super-simple HTML page, you can see the basics 
of j Query Mobile at work more clearly. Ch+V 匕 ^ "ts • 


WII be rhcc-tihj 
七 “ pays a 


-Pc 


A tYY, pages. 


WcVc us'm^ HTML*? 
<P0CTVPt> *taoy. ^ 


sc\ri 


it s -this basi^/ 




findevent.html 




extras 


index.html 

灼 。 >/. lAfe’ll s\)ov/ 
\IO\A 七 ’S m I 七 

•m a Irbble bvt. 

This -Poldc\r 
domes a brt 



tartans 


^ I 

V.1 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= M UTF-8" / > 

<title>The Tartanator</title> 

</head> 

<body> 

<hl>The Tartanator</hl> 

<p>The Tartanator is a community-built 
association of groups, businesses, and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting 
the understanding and enjoyment of 
<strong>tartans</strong></p>. 

</body> 

</html> 


chapter6 directory structure: 
your starting point 


Include jQuery mobile code components 

Open index.html in your text editor and get ready to plop in some j Query Mobile. First 
things first: include the JavaScript and CSS that will make things go. 

I^ludc j^uev-y 
Mobiles CSS ： 
this will style 
owr mav-kup ih 
mobile—fvichdly 



index.html 


丁 he ihdlusioh o-p j^uevy 3hd 

j 夕 ueiry Mobile JavaS^vipt 

will <\ivc OUV- ^dd . 4 -c 




Rcwcrwfecv- 七 ha 七 
j 夕 Mobile »S 

j^uCV"Y ( 乙。 代 ). 



9 ,v c ouv- web app its 

mobile—pHchdly ihtev-a^ti 


lOhS. 


<title>The Tartanator</title> 

<meta name= n viewport" content= n width=device-width, initial-scale=l 
<link rel="stylesheet" href= M http : //code.jquery.com/mobile/1.Orel/ 
jquery.mobile-1.Orel.min.css" /> 

<script src=”http: / /code . j query. com/ j query-1.6.4 .min. js n X/script> 
<script src="http://code.jquery.com/mobile/1.Orel/jquery.mobile-1.OrclV 
min. js"X/script> - - - 

</head> 

index.html 
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build a mobile web app using a framework 


Mark up the rest of the page 


We’ve included the three main jQuery Mobile components from jQuery ? s GDN 
(content delivery network — that is, the code as hosted on code.jquery.com). That 5 s a 
reliable and fast place to link to the code. 

Now that we’ve included the three core files — theme CSS, j Query Gore, and 
j Query Mobile itself — we need to make a few adjustments to the HTML markup 
within the <body>. 


By wrapping parts of our content in <div> tags with descriptive data-* 

attributes, we tell j Query Mobile how we want them treated: I/Vcll e 矸 lam data -氺 attributes 

m jus*t 3 moment 


A data-v-olc 

tells 

Mobile "to *brea 七 
•(Jic as a 

-full \>ay. 



A doi*t3—vole o-p 

hS—you 

9^csscd it—this is 

the doh-tcht 
of the page. 



>! 



<body> 


<div data-role="page"> 

<div data-role="header 

<hl>The Tartanator</hl> 

</divX! -- /header --> 

Xdiv data — role= n content”> 


厂 : 

> e 7 


T\\t data - vole of 
V^cadc/ -tells 
Mobile bo style tWis 
as a headev - like 
clcw>cir\*t- 


L-ct’s 切 a or\ 

Wat j ㈣ 

docs 


<p>The Tartanator is a community-built 
association of groups , businesses and individuals 
bent on keeping the Scottish heritage alive 
overseas by promoting the understanding and 
enjoyment of <strong>tartans</strong>.</p> 

</divX! -- /content --> 

<div data-role= n footer"> 

<h4>Bring forrit the tartan!</h4> 

</divX! -- /footer --> 

</divX! --/page--> 

</body> 



index.html 



Tesr DriVq 


4 汁 iUhc “/ w is . 


It really is that easy to make a simple jQuery Mobile page. 

Add the items to the head and body of the index.html file and save it. View it in a 
browser (you can view it in a mobile browser if you like!). 
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/OS or not? 


Awd weVe off! 


We don’t have anything too fancy yet (OK, it’s 
actually pretty dull), but the landing page does 
look somewhat “mobile.” 

Note how j Query Mobile adds gradients, sizes, 
and font treatments, and turns our elements 
into header- and footer-like chunks. 


Ou\r -fiv-st j^ucv-y 
Mobile fdje ； as 

\rcr>dcv-cd OY\ ay\ iPhone 


The Tartanat< 


J he Tartanator »s a community-built 

•nS=^ b_ esses and 

heritage Jive 


Bring forrit thet... 



-foo-tev- 

doesn't 

but let’s y/ov-v-y about 

■bV^a-t a bit laW. 



What does it even 
mean to ''look mobile ”？ Doesn*t 
that page mostly look like a 
native iOS app? 


The default jQuery Mobile look 
definitely smacks of iOS. 

For better or worse, the rounded-button, 
gradient-laden-headers look of the native iOS 
platform have become a common visual metaphor 
for web-based mobile apps. And many people now 
associate that appearance with “looking mobile.” 

But beyond Apple-esque polish, there are some useful 
things going on here. Whitespace is increased and 
font size optimized for small-screen reading. Soon, 
we’ll build forms and be able to see that jQM gives 
us larger input areas and chunky buttons — big touch 
targets for our fat fingers. 



Tiicsc av-c jus*t a 
double cx.aw'flcsf 
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The HTML5 data-* attribute 


jQuery Mobile makes heavy use of the data-* 
attribute introduced with HTML5. In our simple 
page, we used the data-role attribute to inform 
j Query Mobile of, well, what role the given element 
has in our page structure. Right now things are pretty 
simple: we have a header, some content, and a footer. 


HTJVLL5 4f Up Ckse 




The data-* attribute was introduced with HTML5 


as a way to let developers associate lightweight but 
meaningful data with HTML elements. 


Puild more of the tartanator 

Now that we have a solid foundation, let’s start 
building more of the Tartanator. Right now we have 
our landing page, but we need to link it to some other 
basic pages to move forward with the project. 


In the past, we developers found some ways to do 
things like this by kind of hijacking other element 
attributes like class or title. 

But now there is a real, sanctioned way to do this, 
and jQuery Mobile takes advantage of it. 

As we move along, we’ll continue to encounter 
places where jQuery Mobile uses different data- 
attributes to get its job done. 



index.html 

I 




aboutus.html 

今 

A si, 


h simple * 


•oh page 


findevent.html 


TWis will be a 阿 
•to -f md events, but 
r\ow i*ts jus*t 3 
fay. 



tartans.html 


□ 

tartans 
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sooh. 


V^/tW g 
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Time to add a navigation-like list of links to the three subpages. Edit index.html and add a 
very simple <ul> after the introductory paragraph inside of the main content <div>. The 
text of the list elements should be the names of the subpages: About Us, Find an Event, 
and Popular Tartans. J 

lA/cll add actual Imks m y 

d bi*ti -fo\r y \ o ^ i , j^s*t Ok? 
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data 画 roles a go-go 


f% 

SoLutlOH 


Basic HTML FTW! 


<p>The Tartanator is a community-built association 
of groups , businesses , and individuals bent on keeping 
the Scottish heritage alive overseas by promoting the 
understanding and enjoyment of <strong>tartans</strong>.</p> 


<ul> 

<li>About Us</li> 
<li>Find an Event</li> 
<li>Popular Tartans</li> 
</ul> 

</div><!-- / content --> 


I 

index.html 


Make it a jQuery Mobile list 

If you save your changes and view index.html in a 
browser, you’ll likely notice that our little list doesn’t 
look very exciting (or mobile-ish). That’s because 
we haven’t informed jQuery Mobile that we want it 
to take note of its existence. We need to use the 
data-role attribute again! 


The Tartanator 


HwvwvW) d 

? 代社 7 Wmdvum 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 


tartans. 


• About Us 

• Find an Event 

• Popular Tartans 


<ul data-role="listview"> 


use "the d3*tcl—vole 3't'bribu'te 
"to tell j^uev-y Alobilc "to tv-cat 
this as a list view. 

That >way, j^uevy Mobile 
v/'ill style the Widely air>d 
vcdo^'izjC i*ts 


Bring forrit the t.. 




jQuery Motile alters content 
witk tke listview ctata-role 
to make it look anct feel 
like a more motile-friendly, 
interactive list. 


Tesr DriVq 


Add the data-role attribute to the <ul> in index.html and view the page in a browser. 
What do you think of the way jQuery Mobile styles the list? 
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Our list: fetter, but wot quite there 

By default, jQuery Mobile will treat listviews like page 
content, filling the full width of the screen with the < 1 i > 
elements. On our landing page, this looks a bit awkward 
and cramped. 

For our purposes, the navigation list is part of the content, 
not the entirety of it. j Query Mobile’s list options include 
inset lists — lists that are contained within a page that has 
other stuff on it. Let’s use that. 


Fivst *tv"Y — 

The list looks a bit 
sfi\ruhtlicd av\d odd. 



The Tartanator 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 

About Us 
Find an Event 
Popular Tartans 


<ul data-role="listview" data-inset= M true 


> 


Bring forrit the t" 






this! 







Add the data-inset 

attribute to the list in index.html 
and try viewing the page again. 


mset list - 

looks bcb'tcv*. 


The Tartanator 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 

About Us 
Find an Event 
Popular Tartans 



Bring forrit the t.. 



The list looks great and all, but 
none of its elements are clickable. 
But, uh, doiVt we need to make them 
actually link to something? 


You’re right. Let’s link up 
the pages! 

Time to make the Tartanator 
more than a one-page show. 
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jQM links 


Link to multiple pages with jftuery Mobile 

Linking to other pages in jQuery Mobile is quite straightforward. 

All we have to do is add basic HTML links: 



<ul data-role= n listview n data-inset= n true"> 

<li><a href="aboutus .html">About Us</aX/li> 

<li><a href="findevent .html">Find an Event</aX/li> 

<li><a href="tartans .html">Learn about Tartans</aX/li> 

</ul> _ 

-i 

index.html 







Add the links to the list in 
index.html and test them 
out. What happens? 


3 vv*ov/ \toy\s 

sV^OV/ USCVS 3V-C 

6l'>6kablc Vmks. 


The Tartanator 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 


About Us 

O 

Find an Event 

O 


Popular Tartans 


The Tartanator 


Bring forrit 


r 

Theme is ho 

file ih ouv- div-cd-fcovy 
yet. This is how J^ucv"y 
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Tt 

as 
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Error Loading Page 


twit 。 〜 1 . …，•一卜 _"a 〜一。 n 

heritage alive overseas by promoting the 
understanding and enjoyment of 

tartans. 


About Us 

O 

Find an Event 

O 

Popular Tartans 

O 


Bring forrit thet... 
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jOtuevy Exyosedi 


This week’s interview: 

How does jQuery Mobile handle 
loading pages? 


Head First ： I hear you have something to tell us 
about what a “page” really is, to you. 

jQuery Mobile ： I do! It’s one of my favorite things 
about myself, so I wanted to explain. 

Remember how the structure of one of my pages 
uses a <div> with a data-role value of page? 

Head First: Sure. 

jQuery Mobile ： The markup contained within that 
<div> — often a header, content area, and footer — is 
what I consider a page. 

Head First ： Then what is the point of the rest of 
the HTML markup? Is it chopped liver? 

jQuery Mobile ： Definitely not! In a web app 
designed along my principles, each HTML file is a 
standalone, autonomous thing that you can visit in 
your browser. 

Head First: I’m lost. If each HTML file is 
independent, why bother with the <div> with the 
data-role of page? 

jQuery Mobile ： Let me back up. When you first 
navigate to a page in one of my sites or applications, 
that page is loaded just like any old HTML page on 
the Web. 

But once that first page is loaded, I do something 
different. When you click on links, I find the page 
content from the requested HTML document — that 
is, the stuff in the <div> with the data-role of 
page — with AJAX and inject it into the current 
page’s DOM — 

Head First ： But what is the point of that? 


jQuery Mobile ： There are several points, if you’d 
let me finish! 

Instead of requesting and downloading the whole 
requested page — scripts, images, styles — and 
reinitializing and rebuilding the DOM from scratch, 

I only snag the pieces that matter. That saves on 
HTTP requests, bandwidth, and processing time 
and makes the experience feel a bit more natural 
and native. 

Head First ： If content pieces are loaded 
dynamically, how come I see the URL of the link I 
clicked on in the address bar of my desktop browser? 

jQuery Mobile ： My modest exterior belies the deep 
sophistication of my navigation model. I always aim 
to have real URLs for the pages in my apps, even if 
the pages are really generated dynamically or there 
are multiple <div> tags with a data-role of 
page in a single HTML document. 

By having a unique and reusable URL for AJAX- 
loaded content chunks, I can make them look and 
act like full-blown web pages. When the browser 
allows me to (not all browsers do), I even update the 
displayed URL in the browser’s address bar as I load 
in new content asynchronously. 

Head First ： If I understand correctly, then, I can 
access each HTML file in my app or site directly, 
but the content of those documents can be retrieved 
independently and dynamically, when linked to, to 
improve performance and responsiveness? 

jQuery Mobile: Exactly! 

Head First ： Thanks, jQuery Mobile, for a really 
dynamic chat. 
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degrade gracefully without JavaScript 



If page content is loaded 
dynamically with AJAX, what happens to 
older browsers with limited JavaScript support 
or browsers with no JavaScript support at all? 

Do they break? 


jQuery Mobile can work even if there is no 
JavaScript support at all. 

Recall that the links in the markup start out as just that: 
basic HTML links. It ? s jQuery Mobile’s JavaScript that 
does the magic of converting the links into dynamic 
AJAX-y goodness for browsers that support it. 

For browsers that don’t support this, navigation between 
pages works just like the old-fashioned Web always has. 


% 




tWei^re no 

Dumb Qi] 


Questions 



Clrazy, huh? 


If pages are loaded with AJAX, why 
do I need to create separate pages at all? 
Can’t I just put all of my app’s content 
into one page and use jQuery Mobile to 
show and hide it? 

You could, but you’d be missing out on 
jQuery Mobile’s nice notion of progressive 
enhancement. You’d be leaving lesser 
mobile browsers (those that can’t do the 
snazzy JavaScript) out in the cold. 

You’d also have a large, complex file that is 
difficult to maintain and has a heavy DOM 
that is tough for lesser phones to handle. 
jQuery Mobile encourages you to author 
websites and apps like you’re used to: with 
separate HTML files that can stand alone or 
be sucked in with AJAX. 


How did jQuery Mobile know which 
data-* attributes to use? Where can I 
find information about all of the available 
data-* attributes? 

Developers can cook up any name they’d 
like for data-* attributes (well, they have 
to start with a letter). There is no prescribed set. 
The idea is that data-* attributes pertain 
to the functioning of the website that they 
appear in—that is, they’re not intended for 
communicating data to external applications. 
Because of that, web developers have 
relative freedom to generate their own 
data-* naming conventions. 


What version of jQuery Mobile are 
we using? 

The jQuery Mobile dev team is on a tear! 
During the time we spent writing this chapter, 
both 1.0 beta 3 and 1.0 Release Candidate 1 
were released, requiring some scrambling on 
our part. 

Oh, wait, we just checked. 1.0RC2 is out 
now, too! Oh! There’s RC3! Oh, no, it's faster 
than a speeding bullet! jQuery Mobile 1.0 is 
now released and official! 

For the Tartanator, we’re using 1.0RC1. 
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FOOTER (RE-)CONSTRIJCTION 

As we saw on page 230, the text in the page footer is getting truncated on narrow screens. 
That’s because jQuery Mobile leaves room for button placement around header elements 
in headers and footers — but we don’t have any buttons in our footer. Let’s fix it! 


o 


❺ 


0{A}r bcW 

MUUiil 

- f7 

li^s Wated. 

Find an Event 

o 

Also, \i V^as a \)\i 



visual 仏 3” Vb 

Popular Tartans 

o 

| 七 -feels vcally da^rk i 







Bring forrit the t... 




Remove the <h4> element surrounding the footer text 

Right now, the footer text is wrapped in an <h4> element. By 
removing this header element, we’ll keep jQuery Mobile from 
leaving room for buttons and, as a side effect, truncating the text. 


— By default j—7 MoWc 、 

s 七 "I” l cavcs 矿 oow “ 
button av-ouy\d V^cadcv- 

V)cadcv-s ay\d -footers. 



<div data-role= n footer n > 

<h4>Bring forrit the tartan! </h4> 
</div><!-- / footer --> 




index.html 


Add a CSS rule to center the footer text and give it a 
bit of padding. 

Unfortunately, removing the <h4> will also remove the centering and 
the padding. We need to account for this in our own CSS. 

Open tartans/tartans.css in your text editor and add this rule at the top 
of the file (there is already a bunch of CSS in this file). 


[data-role="footer"] { text-align : center; padding : 5px 0;} 

#abercrombie { background-image : url('icons/abercrombie.png') 





丁 his CSS sclc^-fcov- applies -fco dcrwChts with a 
data-\rolc a-t-t\ribu-tc tha-t has -the value u -foo-tcv. w 



tartans.css 




build a mobile web app using a framework 



杳 ^Js 雪 aJaoo 


L 
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footer (re-)construction exercise 



FOOTER (RE-)CONSIlUJCriON 
o Link in the stylesheet. 

Edit index.html again and add a link to the stylesheet. 


<link rel= M stylesheet" href= n http :// code.jquery.com/mobile/1.Orel/ 
jquery.mobile-1.Orel.min.css" / > 

<link rel="stylesheet" href="tartans/tartans.css" /> 

<script src= M http :// code.j query.com/j query-1.6.4.min.js n ></script> 


o Check our progress. 

Save the file and view index.html in a smartphone browser or 
simulator. 



index.html 




The fix to both of these 
items involves a couple 
of small changes to the 
footer <div>_ 

We want to tell j Query Mobile 
to use fixed positioning to make 
the footer stick to the bottom 
of the page, and we need to 
change the theming swatch to 
make the footer appear less 
dominant visually. 


Ifs not cut off anymore. But it still 
feels dark. Also, look, it doesn’t always end up 
at the very bottom of the screen. There's a 
gap. That makes it feel kind of weird. There 
must be a way to fix that... 


The Tartanator 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 


About Us 

o] 

Find an Event 

o 

Popular Tartans 

o 


Bring forrit the tartan! 


Ti^c -foo*tcv is^*t alv/3ys at the 
bo*t*tom o-f dll 七 k 

sometimes *thcv*C IS 3 
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build a mobile web app using a framework 




Use fixed positioning on the footer so that it always shows 
up in the same place. 

By using the data-position attribute and setting its value to fixed, 
we tell jQuery Mobile to use fixed positioning on the footer element. 
That way it will always stick to the bottom of the page. 


Use a different theme swatch to make the footer appear 
less dominant. 



j Query Mobile’s initial stylesheet has five default color groups, called 
swatches. These five swatches are referenced by the letters a through e. 

By default, header and footer elements receive swatch a, which has the 
most dominant contrast. 

Our footer isn’t a particularly important page element, and right now 
has too much visual weight. By explictly assigning swatch c, we can 
make the appearance of the footer much less in-your-face. 


The drfaul 七 dolov sdheme 
-fov sv/a*tdhcs a 
t is dc-f med m j6^ucv-y 
Mobiles CSS. 


You can use the data - theme attribute on any element to override 
j Query’s default swatch for that element. 


<div data-role= n footer" data-position="fixed" data-theme ： 

Bring forrit the tartan! 

</div><!-- / footer --> 


c"> 



index.html 


That’s it! The footer should 
look a lot better now. Try 
saving your changes and 
reviewing our improved 
footer in a mobile browser 
or simulator. 


Tiic v*clc3sc o-f j6^ucv*y Alobilc 10 
mdludes a Theme Rollcv- *tool 


makes cas'icv*. See move at 

httf/jc^ucv-ymobl IC • dom/*tiiCmCV-ollcv/. 
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bring on the tartans 


The meat of the Tartawator: The tartaws themselves 


Let’s check in with our status on phase 1 of the 
Tartanator project: 


The Tartanator 



Build content pages and site structure. 


We need to create basic sections and pages and create an 
overall structure. 

got ou\r basid layout 
代 d away a^d dv-catcd tk 
basics the maih pa^es. 


Create the tartan listings. 

For the first phase, we’ll create a list of existing popular 
tartan patterns. The tartans section should be a browsing 
interface that — of course — looks and feels applike and 
mobile oriented. . 

OY\ OUV" 


Build a prototype of the tartan-building form. 


V 


We’ve got our core content pages — at least the skeletons of 
them — in place. Now let’s turn our attention to matters that are 
more interesting: the tartans themselves. 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 


About Us 

o 

Find an Event 

o 

Popular Tartans 

o 


Bring forrit the tartan! 

又丁 -foo-tev- is y\o^i positioned 

*»s less 

Visually* 

gc-t -to -this 

ih jus-t a bii 


For phase 1, the Tartanator will allow users to browse a 
collection of popular and unusual tartans. Think of it 
kind of like a quick tartan reference. 





this! 


Copy tartans.html from the extras 
folder to the chapter6 folder (that 
is, move it up one level). 


昏 et to work ow tartans.html 


、丁 he iairtahs divc^Wy, whi^h 
^oh-tams -the individual -bv-bh 
JfT 亂 should a\^ady 

be ih yowr 匕 haptcM durc^vy. 


The tartans.html file has the beginnings of a list (<ul>) for the 
popular tartans. To get you going, the list contains tartans starting 
with A and B. Once you’ve moved the tartans.html file into place, 
load up the Tartanator on a browser (mobile or otherwise) and 
take a peek. You can click on the tartan names to visit the tartan 
page for that tartan. 
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build a mobile web app using a framework 


We've given you a head start ow the list 


The section is a 


ta 灼 listmg ! 

： \ov\ of a sii 


dombma-tio^ o4 - a si^le HTML 

pay with a lisi o( -bv-ta^s... 


Back Popular Tartans 


...dr\d dy\ mdWidvAal HTML 
pay -fov* *ta\rt3ir\* 


The -Pi\rs-t sy/aj at 七 he 
list o( "ta\rta^s—V/C did 

Abercrombie 

o 

七 his -Pov- you already. 

Arbuthnot 

o 

Baird 

o 


Barclay Dress 

o 


Barclay 

o 


k n 




Bring forrit the tartan! 


tartans.html 



Bath *tav*tar> pa*t*tcv-ir> 
\\dis *i*U o^iy\ ttTAIL 
TV>c is a CSS 
bddk^vouy>d 


tartans/baird.html 


Take the list from blah to better 


The list of tartans is looking a bit lifeless compared to the tartan 
information pages themselves. Good news! jQuery Mobile makes it 
easy to drop thumbnails into lists so we can have small icons on the list 
itself (much snazzier). Here’s an example: 


V^p* All you heed -to 
do is ddd dh irv^e. 
j 公 Ud\ry Mobile takes 
da\rc o( the \rcs-t. 



<li><a href="tartans/abercrombie.html M > 

<img src="tartans/icons/abercrombie.png' 

<h3>Abercrombie</h3> 

</a></li> 


alt="Abercrombie 



Add thumbnails to the list items in tartans.html. The icons are in the tartans/icons directory and 
have the same name as their HTML counterparts (but with a .png extension). 
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exercise solution 



<ul data-role="listview M > 

<li><a href="tartans/abercrombie.html"> 

<img src= M tartans/icons/abercrombie.png" alt= n Abercrombie" /> 

<h3>Abercrombie</h3> 

</ax/li> 

<li><a href="tartans/arbuthnot.html"> 

<img src= M tartans/icons/arbuthnot.png" alt="Arbuthnot" /> 

<h3>Arbuthnot</h3> 

</a></li> 

<li><a href="tartans/baird.html"> 

<img src= n tar tans/icons/baird. png'▼ alt="Baird" /> 

<h3>Baird</h3> 

</a></li> 

<li><a href= n tartans/barclay-dress•html"> 

<img src="tartans/icons/barclay-dress.png" alt= n Barclay Dress" /> 

<h3>Barclay Dress</h3> 

</a></li> 

<li><a href="tartans/barclay.html"> 

<img src= M tartans/icons/barclay.png" alt= n Barclay n /> 

<h3>Barclay</h3> 

</a></li> 

<li><a href= n tartans/birrel1•html"> 

<img src= M tartans/icons/birrell.png" alt= n Birrell n /> 

<h3>Birrell</h3> 

</ax/li> 

<li><a href="tartans/blair.html M > 

<img src= M tartans/icons/blair.png" alt="Blair" /> 

<h3>Blair</h3> 

</ax/li> 

<li><a href="tartans/borthwick-dress.html"> 

<img src= M tartans/icons/borthwick-dress.png" alt= M Borthwick Dress' 

<h3>Borthwick Dress</h3> 

</a></li> 

<li><a href="tartans/borthwick.html"> 

<img src= M tartans/icons/borthwick.png" alt="Borthwick" /> 

<h3>Borthwick</h3> 

</a></li> 

<li><a href="tartans/bruce.html"> 

<img src="tartans/icons/bruce.png" alt= n Bruce" /> 

<h3>Bruce</h3> 

</a></li> 

<li><a href= n tartans/buchanan.html M > 

<img src="tartans/icons/buchanan.png" alt= M Buchanan n /> 

<h3>Buchanan</h3> 

</ax/li> 

</ul> 


/> 
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Prop m the rest of the tartaws 


There are a whole bunch more tartans that need 
to be added to the list (with their nice icons). Don’t 
worry, we won’t make you do that much typing. Go 
find tartan-list.txt in the extras folder. In the file, you’ll 
find a snippet of HTML that is the full <ul> for all of 
the tartans. Copy and paste the <ul> into tartans.html ， 
replacing the current HTML list. 


r ( st—V^cv, ^ ko 怕!一枷 (Have 

mtludcd all la 山⑽ ^ 

七 he tuv-v-cy\*t 6olle6 七 ’ 






Hey, the list’s looking pretty nice, 
but it seems kind of long. It’s hard to 
find a specific tartan name without a 
whole lot of scrolling. 


True. It’s a bit unwieldy. 

Turns out, j Query Mobile has more up 
its sleeve for us. More easy-to-implement, 
good bang-for-the-buck improvements to 
our tartan list coming up! 
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filtered, organized lists in a snap 


Filter and organize a list 


O We can add list dividers. 

We can break up the list into sections by using list 
dividers. This will help organize the list by grouping 
tartans by their first letter. 


❺ We can add a list filter. 

With jQuery Mobile, it’s eerily easy to drop in 
a filter for a list. A filter looks like a search field 


(with a little magnifying glass and everything!) 

and filters the list as the user types in it. 

No JavaScript coding required! To add a -f iltcv -fov- the list, 

add a data--fi|-tc\r attv-ibutc -fco 
<ul> with a value of 



all 

七 1 七! 


You tav\ visually scpva 七 e 七 ^ 
/r Wsi bv addM <l*«>s ^ a 
^ aata^olc % 七一 dWidw 

® - 

<ul data-role= n listview" data-filter="true"> 

<li data-role="list-divider">A</li> 

<li><a href="tartans/abercrombie.html M > 


<img src= M tartans/icons/abercrombie.png" alt="Abercrombie" / > 
<h3>Abercrombie</h3> 

</a></li> 


tartans.html 



Tsst DriVq - 

Give the <ul> in tartans.html a filter field and list dividers. 
Add list dividers for each letter (except those that don’t 
have any tartans，like Q and X). 

Save your work and view the results in a browser. Pretty cool, eh? 
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Our tartaw list is wicer wow 


build a mobile web app using a framework 




mobile-vcady widgets 
like these ave ohc of -tKc 
hallirnairks o-f mobile Ul 
+iramcwoirb like j^uevy Mobile. 


List dividev-s help 
b\rcak up the Ioh 0 
pay of -blrbhS. 



Back Popular Tartans 



丁 m 七 -field 
y,-,|| CmsiaMy ) 以桜 

*tav-*tair\s by 



I notice that when you change 
pages in a jQuery Mobile web app, there 
is an animation effect. What is that? 

To make web apps feel more 
consistent with mobile user interface 
patterns, jQuery Mobile applies a transition 
to page changes. 

By default, the slide transition will be 
used, which makes it appear that the new 
page is sliding in from the right. To change 
the transition that is used, you can add 
a data-transit ion attribute to 
the link in question. Haifa dozen or so 
transitions are supported. See jQuery Mobile 
documentation (on its website) for details. 



Will this stuff work on every 
phone? 

No mobile framework can claim that 
distinction. But jQuery Mobile strives to have 
as much cross-platform support as possible. 
You can see a list of the supported devices 
and browsers and how well they are presently 
supported at http://jquerymobile.com/gbs. 


What happens if a device or 
browser isn’t supported? Or if JavaScript 
is turned off? 

jQuery Mobile’s philosophy is heavily 
biased toward progressive enhancement. 
And so is our underlying markup! 

Why don’t you try it out yourself? Load 
up the Tartanator in a web browser with 
disabled JavaScript. Sure, it isn’t exactly 
pretty, but it works. 
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client feedback 


Ifs time to show the early Tartawator 
work to Ewan 


How are we doing on the project steps? 



Build content pages and site structure. 



Create the tartan listings. 


Build a prototype of the tartan-building form. 


Before we start into the form, let’s check with the client to 
make sure our overall approach so far is OK. 
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Jim: What does “make it look like a native app” even mean? 

Frank: It seems like that’s a very subjective thing, doesn’t it? I 
think what Ewan is looking for is something that feels a bit more 
“app”-y. 


Jim: Which means...? 

Frank: I guess like tab bars, navigation elements, button-y and 
icon-y bits. Ewan seemed happy with the transitions, for example. 
Those, to him, feel native. 

Jim: But don’t we run the risk of emulating one platform too 
much at the expense of others? 


Frank: Heh, yes. When people say “native,” sometimes they 
are dangerously close to meaning “make it look like iOS, please.” 
Each platform has its own UI metaphors. 


Jim: This sounds like a catch-22. To make our customer happy, 
we need to look native, which might well mean alienating, say, our 
Android and BlackBerry users. 


Frank: I think we need to pick and choose some things we could 
enhance to make the Tartanator feel more like an app without 
making it look like an iPhone app. To be fair, j Query Mobile 
elements in their default skins look kind of iOS style. So we’re 
already partway down this path. 


Jim: So the aim is to make the Tartanator feel more like an app 
without necessarily feeling platform-specific native? 

Frank: Exactly. I’ll sketch down a few thoughts on some changes 
we can make to shoot for that goal. 


The new goal: make the 
Tartanator look more applike 
without necessarily looking 
platform-specific. 
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Tricks to make it feel more like m app 


Here are some quick things I think 
we could do to make the Tartanator 
feel more like an app. 


Ah 
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Make tartanator feel more applike: to-dos 


Convert links on landing page into persistent 
toolbar with icons. 

Do away with the separate About Us page, as 
content is not forthcoming. Consider the current 
landing page the de facto About page for now. 

Make the header bar persistent, too. 
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Add a footer toolbar 


In jQuery Mobile, it’s easy to add a fixed-position toolbar to either 
the header or the footer. To create a more applike feel, let’s put a 
toolbar in the footer instead of having the links to the Tartanator’s 
sections inside a <ul> on the landing page. 

Construct a wavbar 

Inside of a header or footer container — so designated by the 
data-role attribute — we can put another <div> with a 
data-role of navbar. This tells j Query Mobile to treat the 
contents as buttons in a toolbar. The basic construction looks 
like this: 


Kotitc that wc vc 


A \rolc o-f 

j^uc\ry Mobile 

"to rwakc this look lik 

well, a havbav-. 

Kdvbdr bu*t*tor\s (i.e. 

I'mks) y/ill 50'm here 



<div data-role="footer" data-position= n fixed"> 

<div data-role=”navbar"> 


</divX! -- / navbar --> 

</div><!-- / footer --> _ _ 


/ 


Put buttons iw the navbar 

Instead of links in a vertically organized list, we’re going to make 
toolbar buttons to access the main sections of the Tartanator. 
This is a more applike metaphor. 

j Query Mobile will automatically convert linked list elements 
within a navbar into buttons. 


index.html 




Mobile will 

aiA-tomat'idally 眯 ake 

•bV^csc I'mks look 
like butbems. 


<div data-role= n footer n data-position= f, fixed"> 
<div data-role= f, navbar n > 

<ul> 

<liXa href="index .html">About</aX/li> 
<liXa href = n findevent • html">Events</aX/li> 
<liXa href =" tartans . html">Tartans</aX/li> 
</ul> 

</div><!-- / navbar --> 

</div><!-- / footer --> 


Remember Y/cVc 

七 he 

aboutus pay 
•m -favor o-f us'mj 

pay as a” 外。认七 

? a 3 c . 




index.html 
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iconic toolbar buttons 


Make the toolbar snazzy 


So far, so good, but our toolbar buttons are a bit drab, 
jQuery Mobile comes with a set of 18 or so default icons 
that we can use, easily. Let’s drop some icons in by using 

the data-icon attribute. 丁 

A list o-P available default 

idohs be -Pouhd ih the 

j^uevy Alobilc do^urwChta-tioh. 


Take l ： Pc*ta'»l 

buttem rtY\dtr\Y\(^ 




About Events Tartans 


They look like buttohs, all 
Hght but they dould be a 
bit mo\rc 



<div data-role="footer’▼ data-position= n fixed"> 
<div data-role= n navbar n > 


<ul> 



TV^c data 一化 cm aU^butc 

mdi^d'bcs idoy\ *to use 

•m *tWis bu*t*to 灼 . 


<li><a href= n index. html 1 ' data-icon="info">About</a></li> 
<li><a href= n findevent.html" data-icon="star">Events</a></li> 
<li><a href= n tartans.html" data-icon="grid">Tartans</a></li> 


</ul> 


</div><!-- / navbar --> 



index.html 


Also, let’s denote which section the user is currently viewing by 
setting a class of ui-btn-active on the appropriate link. 
This will show up with theming that makes it highlighted, thus 
appearing active. 


TVis Code joes m ’ur\de%iW. 
For o-tV^cv fajes, youd 
-to assi^ tWis dass -to 



<li><a href =,, index.html n data-icon= n info" class="ui-btn-active">About</ a></li> 
<li><a href= n findevent.html" data-icon= n star">Events</a></li> 

<li><a href= n tartans.html n data-icon= n grid n >Tartans</a></li> 



index.html 
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Finalize the structure 



Let’s check in on our to-dos: 


Events 


Tartans 


Pcta'il o-f y^avbav- as i\\t 
ufda-ted Code *rb. 



What about that footer 
slogan we spent so much 
time adjusting? 


Convert links on landing page into persistent 
toolbar with icons. 

Do away with the separate About Us page, as 
content is not forthcoming. Consider the current 
landing page the de facto About page for now. 

Make the header bar persistent, too. 

V M j us 七 wd -to -tweak 
"the Keadev- d bi-t how... 


Ah, yes. Life on the Web! Requirements 
are always changing. 

We’ve replaced the footer with a navbar, but we don’t 
have to discard the tagline entirely. Let’s make it a 
kind of subheader on the landing page (only). 


Make the header sticky, too 

While we’re in there, let’s make the position on the 
header fixed, too. That will make the header behave 
in the same way as the footer: always present at the 
top of the screen, even if the user scrolls. 



<div data-role= n header" data-position="fixed"> 

<hl>The Tartanator</hl> 


</div><!-- /header --> 

<div data-role="header" data-theme= M b n class= n forrit">Bring forrit 
the tartan!</div> - - 


index.html 
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test it and get feedback 


靖 T D 喊 


Ah, iterative design. The way of the Web. Let’s update the Tartanator. 


o Implement the new footer navbars. 

Edit index.html, findevent.html ，and tartans.html. Replace the footer with the 
version we cooked up on page 250. 

Make sure to assign the ui-btn-active class to the correct anchor 
tag, depending on the page. 

❺ Give the header a fixed position. 

Add a data-position attribute to the header on each page. 

o Add the tag line to the landing page (index.html). 

For index.html (only), add the tagline as a subhead. 



Popular Tartans 


丁 he Tartanator is a commun 
association of groups, busiru 
individuals bent on keeping 
heritage alive overseas by pi 
understanding and enjoymei 
tartans. 


r 

❹ Filter items... 




They will always show up a 七七 he "top and 七 he 
bo-tW o( the page (\rcspcdtivcly), ev ⑶ i*f 
ihe user scrolls. 
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Time to make that tartaw-buildiwg form 

The next step in the project is to create a prototype of a form that will let 
users design their own tartans, right from their mobile browsers. 



Build content pages and site structure. 



Create the tartan listings. 


Build a prototype of the tartan-building form. 

Ewan would like users to be able to construct their 
own tartans by using an applike mobile interface. 



A tartan design is like a recipe. 

But instead of a list of food ingredients 
and their measurements — ounces, grams, 
teaspoons, whatever — it’s a list of colors 
and their relative sizes in the pattern. 

When a tartan is woven, this pattern is 
repeated both horizontally and vertically. 

We need to have a rough idea of how 
tartans are put together so that we 
can build a form to gather the right 
kinds of info. 
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a very tartan recipe 


Tartars: patterns like recipes 


Let’s look at an example. To create the Carmichael clan tartan, 
the pattern looks something like: 


ihgvcdiCht ih -the 
pa 七七 is a pdi\rih 0 0 -(* S 
匕 olov av\d a siic. 




Color . ® iz ® . 

(Stitches) 

Black 

6 

Green 

72 

Blue 

56 

Red 

4 

Blue 

4 

Yellow 

6 


Follow the tartan recipe 



Tiic Cav-midiiacl 

d 3 灼 


To weave the tartan, the pattern is followed in order (in our case, 
we’ll be “weaving” with pixels instead of wool). 


For Carmichael, 6 stitches of black are followed by 72 stitches of 
green, followed by 56 blue, and so on. 

When the last color in the pattern is reached (six stitches of yellow, 
in our example), the pattern is followed in reverse (blue, red, blue, 
green). When the first color (black) is reached again, the cycle repeats. 
The pattern is woven both horizontally and vertically (warp and weft) 
to create the overall tartan pattern. 



TV^c -f iv-s-t a^d last dolov-s (bladk 
and yclloy/) do 於’七 \rcfcat k 

*tav**tan - esc, av-c tailed 

ywiob!' *m i\\t pattev-n. 



blddk 


11 


3' 




午 blue 

亂午代 d "\/〜IU 



Ba 乙 k a 灼 d -fovtK ar\d 

badk av\A -fovtii 


Psssi..-this is -the 
same pattev-h as 
above, jus-t showh 

ho\riioir>-tally ihS-tcad , - >■ 

of vcv-tidally. As -the di-Pfc\rCht dolors 

ovevlap hoHzohtally ahd 

vcv-ti^lly, -they 

the 如仏匕七〜 pattev-h. 



ba^k and". 


We need to create 
form fields that will 
collect the color and 
size value for each 
ingredient in a user’s 
tartan design. 


254 Chapter 6 











































build a mobile web app using a framework 


Translate tartaw patterns to a form 


Let’s take a look at the form prototype we 
want to build. We need fields that allow 
users to enter in those color-size pairs 
that build a tartan recipe. 


OK, we have a general 
idea of the form we 
want to build. Let’s go 
build it! 



^about the — 

bc,h 9 i-ts ahd 

ah °ptiohal dcs^Hp-ti 


： iOh. 


Colo\r-siz^ -field ivs 
lc*b usevs build *tKc 
’myed •心七 l»s*t -fov 
■bKciv* v-cdipcs... 



…办 d so on W\{\\ 
tolov—siz^ 匕 ombo -f ields. 

^Thcirc mov-c.j 




ExcihciS^ 


勹 Back 


Tartan Builder 


Tell us about your tartan 


Tartan Name 


Tartan Name 


Tartan Info 


Optional tartan description or info 


Build your colors 


Color 


Select a Color 


Stitch Count 
2 


Color 


Select a Color 


o 


J 


Stitch Count 
2 


Color 


Select a Color 


o 


Create an empty jQuery mobile page to hold the 
tartan-building form. Using tartans.html as a guide, 
create a blank page. Use the same header and footer, 
but change the title and header of the page to “Tartan 
Builder.” Name this file build.php. 


C ♦: 


About 


★ 

Events 


Tartans 
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HTML5 form structure 


Puild aw HTML 5 form 


The form itself will be a standard HTML5 form: jQuery 
Mobile will adapt it to make it look and feel more 
mobile-friendly. In Chapter 7, we’ll make the form actually 
do something, including enhancing its interactivity with 
JavaScript and spitting out actual tartan images. 

For now ， we’ll lay the groundwork and create a baseline, 
no-frills form that will work in nearly all mobile browsers. 


Form structure 

We’ll want users to name their tartans and, optionally, 
enter a description. Then, they can define color-size 
combinations to build the pattern itself. Let’s give our 
form two main sections: a top section for metadata about 
the tartan and a main section for defining colors and sizes. 


Tav-tar^ 

一 Tarbav' 

一 Tartar W 

一 g€f\ts 6olov -如 



a\rc the things ou\r 

*Po\rrh heeds -to 匕 oiled：. 


I/Vcll use a listvicw <ul> -fco 
help with the layout <^f 

ou\r -fov-m. 


Wihg fD attiribu-tcs 

will help us s^vip-t 


[Blf stRiictjuRe 




<div data-role= M content n > 

<form id="tartanator_form n > 

<ul data-role="listview" id="tartanator_form_list"> 

<li data-role="list-divider">Tell us about your tartan</li> 

<li data-role="list-divider">Build your colors</li> 

</ul> 

</form> 

</div>< ! -- / content -- > 

WAyVXAAAA/v^vyVV^wwNA^/Vyvy^A/vVA^ 

Tiicsc -two list-dW'idcv- build.php 

<|\>s break ou\r -fo\rw> 

'm*to two settlors. 
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Ifs time to add some basic fields 


The metadata form fields — name and description — are pretty basic. 

We’ll use a text input and a textarea, respectively. The only difference 
between the markup we’ll use and what you might be accustomed to is that 
we’ll take advantage of the HTML5 placeholder attribute. 

We’ll also be careful to use proper, semantic, accessible 

label elements. * , , . , , , jj .. 丄 、 i 

TKc pla^oldcv atbriWte lets us add 

pUeUd” 七 c% 七 … a 仑 eW - u jocs av/ay 々 a 

u scv- tritks *m*to -f ield al*tcv-s Its 6cm 七 errts. 


<li data-role= n list-divider">Tell us about your tartan</li> 

<li data-role="fieldcontain"> 

<label for="tartan_name">Tartan Name</label 〉 

<input type="text" name="name" id="tartan_name" 
placeholder:"Tartan Name" /> 

</li> 

<li data-role="fieldcontain"> 


Ba 你 

f fPRH 咖 


<label for="tartan_info">Tartan Info</label> 
<textarea cols="40" rows="8" name="tartan_info" 
id="tartan_info" placeholder="Optional tartan description 
or info" X/textarea> 

</li> 

<li data-role= n list-divider">Build your colors</li> 



build.php 


Wvc jQuery Mobile hints about the fields 


You may notice above that each field is inside an element with a data-role 
of f ieldcontain. This data-role gives jQuery Mobile a hint that form 


fields are within this element, ready to be enhanced. 


1/^cVc usm^ a <ul> -to our 

so y/c put dass cm tacM 

<\\> 七 a 
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nested lists 


Lists withiw lists let the users add colors 


Each piece of the tartan pattern is a combination 


of a color and a size (width) . For layout, let’s group 
each of these compound fields into a single <li>. For the 


baseline experience — that is, for browsers without JavaScript 

support — we’ll generate six of these field groups with PHP 

(saves on typing!). So , , 0 | 0 ^ s ^ 

Here’s a starting point: will be 

actual -fields pev <|i>. 



<li data-role= n list-divider">Build your colors</li> 

<?php for ($i =0; $i < 6; $i++) : // 6 color fields ?> 
<li class="colorset"> 

r 



</li> 

<?php endfor; ?> 

</ul> 


TV)*»s PttP loop 

will o\ 

y/)ia*tcvcv- is mside 
*tV)C loof. 



The Co\oy siz^ -fields 
v/ill go hc\rc- 


build.php 


D 


theretar 

)umb 


e no o 

Questions 


Why are we not assigning the 
data-role of fieldcontain 
class to this <li>? It has fields in it. 

Each of these <li>s (li . 
colorset) will actually contain two 
fields. When we build the fields themselves, 
we’ll place each one of them within its 
own <div>, and we’ll assign the 
fieldcontain data-role to that 
<div>. 


I’m confused. Which kind of 
element should I be assigning the 
fieldcontain data-role 
attribute to? 

Whichever element contains the 
field itself—its immediate parent. That 
could be an <li> or a <div> or a 
<fieldset 〉 ora <p> (orwhatnot). 

The fieldcontain data-role 

tells jQuery Mobile to group the contained 
field and its label when enhancing the 
form. So, each containing element with a 
data-role of fieldcontain 
should contain one field (and its label). 


Do I need PHP for this part of the 
project? 

Yep! As we move into the more 
functional pieces of the Tartanator, well be 
using PHP to do the crunching and thinking 
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build a mobile web app using a framework 


Color-size mgredient pairs: The color select field 


Each set of color fields will have a color (as a <select>) and a size input. 
The classes of color-input and size-input are for later, when we 
enhance the form with JavaScript. 

Obviously, we want more than just black and white as color options! 

More on that in a moment. 



I"L d be Coo\ i-p Could 

use the HT/l/IL dolov 

ih P u ^ ^ bui ala s； 
it s Kurt ye 乇 supported 
ih mdhy bvowsevs. 



<li class="colorset’▼> 

<div data-role="fieldcontain" class="color-input"> 

<label class="select" for="color-<?php print $i ?>’▼> 
Color</label> 

<select name="colors[]" id="color-<?php print $i ?>" > 
<option value="">Select a Color</option> 

<option value= '▼ #000000">Black</option> 

<option value="#ffffff">White</option> 

</select> 

</div> 


Recall v/cVc 
ms'idc a PttP loof ； 

*tWis assies -field 

a IP. 



build.php 



"The -field above \rchdcv-s 
about like this OY\ 

你 odc\rh l/Vcb^it-bascd 
mobile bv-ov/sevs. 


Color 





Select a Color 

o 
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down on the range 


Color-size field pairs: The size field 

We’re using an input type new to HTML5: range. This field 
type has increasingly good support among modern browsers 
(though certainly not universally). In supported browsers, it 
renders as a slider; in unsupported browsers, it degrades to 
a text field, j Query Mobile further enhances the slider into 
something mobile-friendly. 




Stitch Count 

2 ) 


"Hie -field dbove \rchdcv*s 
m about like this Oh 

你。 (1 饮 h l/Vcb^it-bascd 

mobile b\rov/scv*s. 


260 Chapter 6 














build a mobile web app using a framework 


Tsst DriVq - 

Time to put it all together and build our mobile-looking (if not-yet-functional) form. 


o 


❹ 


Put the form fields into build.php. 

Drop in the markup from pages 256 through 260 to 
create the basic form fields. 


Add more color options to the colors field. 

You can use the colors (hex values) from the file in 
extras/color-list.txt and/or add any color you’d like to 
have available for tartan building. 


Look'mj (ad 


Tartan Builder 


Tell us about your tartan 


Save build.php and load it up in a mobile browser! 


Tartan Name 

Tartan Name 


Tartan Info 


Optional tartan description or info 


Build your colors 



We need to link to the 
form and back again in 
an applike way. Let’s 
do that now! 
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there... and back 


Link to the form 

The build form is considered part of the Tartans section of the Tartanator. 
We need to give users a way to get to the form from the Tartans landing 
page (the long list of existing tartans). Adding a button in the header 
should suffice: 





<div data-role= n header" data-position= M fixed"> 

<hl>Popular Tartans</hl> 

<a href="build.php" data-role="button" data-icon="plus M 
class= n ui-btn-right" data-theme="b">Create</a> 

</div><!-- /header --> 


fy\it *tV)C button 

d U plus w idor\. 


The ui-b 七的 -V"i^vt dass will 

你 ake "the bu*t*to^ 

'rijhi (msicad o( Ic-Pi, 
whidh is -the dc-Pauli). 




Ass' 15 ^ i\\t w b w 

sy/at^ -to make tV^c butto” 

s*t3r\di ou*t d bvt »woV"C. 


tartans.html 


..and give users a way back 

On the form page {build.php), let’s add a back button: 



<div data-role= n header n data-position= n fixed n > 


<a href="tartans.html" data-rel="back" data-icon= M back" 
data-role="button">Back</a> 

<hl>Tartan Builder</hl> 

</div><!-- /header --> 

build.php 



By adding data-rel= M back n to the anchor tag, we tell jQuery Mobile 
to treat this link as a back link. When possible, j Query Mobile will send 
the user to the last location in her history when she clicks this link. For 
nonsupporting browsers, we supply a good default href, which is, in this 
case, tartans.html. 
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^Tesr Drii/q 


o Link to the form from tartans. html. 

Add the Create button to the header in tartans.html. 


❹ Put a back button on the form page (build.php) 

Add a back link to the header of the Tartan Builder page. 


勹 Back Tartan Builder 


Tell us about your tartan 


Tartan Name 



/ - 

Tartan Name 

a 

J 





Popular Tartm 




Build content pages and site structure. 


We need to create basic pages for the site and 
create an overall structure that looks and feels right 
on mobile devices. 



Create the tartan listings. 


For the first phase, we’ll create a listing of existing 
popular tartan patterns. The tartans section should 
be a browsing interface that — of course — looks 
and feels applike and mobile oriented. 


Build a prototype of the tartan-building form. 

Ultimately, Ewan would like users to be able to 
construct their own tartans by using an applike mobile 
interface. He wants to see what that might look like, so 
we’ll whip him up a prototype. 


Yay! We’re done with phase 1 of the 
Tartanator. Time for customer review. 
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you're done 


Hey, guys. Thafs looking pretty good, 
rm excited about moving on to the 
next phase of the Tartanator—thafs 
where the fun stuff really happens. 


O 


.ijv f)r yj MoWc 

To \ca^ 一代〔 H WW 仳 


6 。 切 

ovx 




BULLET POINTS 



People want apps! The definition of what, exactly, makes 
a website a web app is fuzzy. Applike websites tend 
to feel more interactive than content pages. Chunks of 
content and data are often retrieved asynchronously and 
inserted into an existing DOM, reducing the frequency of 
full-page loads. 

HTML5 is a specific, single thing—it’s a spec 
representing the evolution of HyperText Markup 
Language (HTML)—but the term HTML5 is often used 
to represent a combination of technologies that create 
applike web experiences. 

Building mobile web apps from scratch can be very 
complex. We encourage you to try it! But for our 
purposes, we used a mobile user interface development 
framework to help us out. 


There are lots of mobile web frameworks out there 
(more every day!), representing many different 
approaches and emphases. 

jQuery Mobile is a popular mobile web framework. 

It has a strong relationship with well-formed HTML5 
markup, which makes it relatively straightforward to build 
mobile interfaces from basic code. 

We built the structure for phase 1 of the Tartanator by, 
among other things, using jQuery Mobile-enhanced 
listviews, headers, footers, navbars, and form elements. 

Making a web app feel more native is always a 
balancing act, requiring some careful decisions. 

We used some HTML5 form element attributes to 
build our prototype form. jQuery Mobile helps to adapt 
these form elements across mobile browsers, including 
adaptation for those that don’t support them yet. 
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tWeiare no ^ 

Dumb Questi9ns 


How much of the code in the 
Tartanator so far is really HTML5? 
That is, how much of it uses tags or 
attributes that are new as part of the 
HTML5 spec? 

We're using the data-* 
attribute quite a bit. That’s new. We 
are also using the range input type 
and the placeholder attribute 
in our form. 

I put the step attribute into 
my range input for the size fields 
of the form, but I can still enter any 
value between 2 and 72...even and 
odd numbers both. What gives? 

Unfortunately, at the time of this 
writing, jQuery Mobile’s range slider 
widget doesn’t support the step 
attribute. We’ll show you a workaround 
in Chapter 7. 


Colors as a select list—that 
doesn’t seem like the most fantastic 
user experience. 

When we enhance the form in 
Chapter 7, we’ll add some JavaScript 
code that will show the user the color 
she has selected. 

What happens to mobile 
browsers that don’t support 
range inputs yet? 

As long as the browser supports 
JavaScript and CSS fairly well, jQuery 
Mobile will convert the range field 
into a slider widget (actually, it does 
this for browsers that support range 
inputs also). 

If a browser doesn’t support range 
inputs and doesn’t have JavaScript 
support (or it’s disabled), the range 
field will most likely appear as a 
standard text input field. 


The header and footer blink 
sometimes, or are slower to load 
than the other parts of the page. 
Sometimes scrolling feels a bit slow. 
Why is that? 

One of the ways jQuery Mobile 
attempts to emulate a native-ish 
experience is by using fixed-position 
headers and footers (when you 
designate them as such, that is). The 
way this is actually carried out differs 
on different platforms. 

In a nutshell: although the landscape 
is improving very fast, fixed positioning 
(in CSS, position : fixed) 
has unpleasantly scattered and weird 
support in mobile browsers. There 
are workarounds, but they aren’t 
perfect. The slightly-less-than-totally- 
snappy performance and occasional 
peculiarity are often manifestations of 
the trade-off the framework is making 
between being applike and adhering 
carefully to web standards. 



Congratulations, 
you’ve just built a 
mobile web witk 
HTML5 and its friends. 

See? It’s really not too many steps from 
the HTML and CSS you already know to 
a mobile-feeling, applike website! 
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7 mobile Web apps in the real WPrld 


Super mobile web apps 



The mobile web feels like that gifted kid in the class. 

You know, kind of fascinating, capable of amazing things, but also a 
mysterious, unpredictable troublemaker. We’ve tried to keep its hyperactive 
genius in check by being mindful of constraints and establishing boundaries, 
but now it’s time to capitalize on some of the mobile web’s natural talents. 

We can use progressive enhancement to spruce up the interface in more 
precocious browsers and transform erratic connectivity from a burden to a 
feature by crafting a thoughtful offline mode. And we can get at the essence 
of mobility by using geolocation. Let’s go make this a super mobile web app! 


this is a new chapter 
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retailoring the tartanator 


It looks nice... 

Now that we’re done with phase 1, the Tartanator has that 
mobile-web-app sheen. 


Popular Tartans (+; Create 



It talks the talk... 

There are buttons. And navbars. And cool page 
transitions. We’re loading content selectively with AJAX. 
We’re reducing bandwidth, requests, and JavaScript 
DOM processing. And jQuery Mobile is helping to make 
our HTML5 form elements look and feel mobile friendly. 
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mobile apps in the real world 


O 


o 



but it needs to walk the walk 


Shiny, sure. Mobile-riff ic, 
sure. But it doesn't do 
anything. Doesn’t an app 
need to do something? 


Take heart. It may seem like 
building phase 1 was full of 
sound and fury，signifying 
nothing. But we’ve laid some 
really good groundwork. 


Wve got a 

—cd Oh HTMH how 

I 仏 time io take it -to the 
"ext level/ 


Phase 2 will build on the stuff we’ve put in place, turning our 
solid — but admittedly somewhat functionality-free — web app into 
what we think of as a super mobile app! 
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super mobile web apps 


Mobile apps m the real world 

Mobile web apps that take good advantage of innately mobile 
characteristics often have certain aspects in common. 

What we like to call super mobile web apps feel like mobile apps for 
the real world. They adapt to their users’ disparate devices with 
the robust use of progressive enhancement. When the user 
doesn’t have a data connection, these apps can function in an 
offline mode. And they take advantage of browser-accessible 
geolocation to provide location-relevant content. 


P\rog\rcssivc 



十 e Mobile Wc\> Apps k,ows all 
about the -thircc -Pcatuvcs well 
ih this -to 

r, ,lc wcb a PP s 如 d 

■feake adva h -b 9c o( 

dwcsorvtc i^obilchcss. 


6{to\otd^\oy\ 
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mobile apps in the real world 


lharpen your pencil 


What will we do to complete Phase 2 and make the Tartanator a 
super mobile web app? 

Our first task is to get a grip on what it is we’ll need to implement to 
complete the Tartanator as outlined by Ewan in Chapter 6. Highlight 
the requirements we haven’t completed yet. Then we’ll boil them 
down into a few core objectives for this phase. 


O 


>age 

ofTa 咖 ns _ 十 ed 

This content isn't ^9 Pot 
ready yet. ， Q boci 十十 


Hew 




App? 


\Nelcorneme55age 


T ^^° + 


o 


TaciSOil 


Events page 

-If would be nice if the app 
cocild somehow “link info" ocir 
international events database. 

一 a user’s phone help "T) 
find the nearest events? CC 


^Miqht want to wait m+'l 


This is the noain part of the 
idea...soonds like an c 


TheTaci^ 


n 


afQp! 


y the whole. 


ap^ e l ar+ana+0r 


Has 


a 


nice nng! 


UPS 




Lots of images 
of tartans! 


木 \Qan 


/s 


A collecfior 


bedon^ 


^^X： n d s and 
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tartanator phase two goals 


The major objectives for the second phase of the project really 
fall into two core goals: 

o Plug in the pieces that let users generate their own tartans. 

We’ve got our prototyped form. Now we need to walk the walk and plug in the 
pieces to make this actually work. We also need to enhance the existing form to 
make it more usable for fancier smartphones and add a few bells and whistles. 

❺ Build a dynamic, searchable, location-aware Events page. 

We’ll need to hook into an existing events data source to let users find nearby 
tartan-related events. That means we'll have to delve into geolocation! 


^iharpen your pencil 

Solution 


o 


poat^spage 

A fefopy of Tartans (Jnfcfed 

㈣。： I 

This content isn't ^9 
ready yet. _ Q bou 十十 hi s . 

■ -- , 


r* -- - 

Events pag( 

-If wocjld be nice 


H^ eb ^ae APP? ' 

一 

TartSOSl 


-工十 woald be nice if the app 
cocild somehow “link info >， ocjr 
inf GPncif ionol events dofobosc. 

- Coaid a user’s phone help *V) 
find the nearest events? t. C\ 

for events stciff-complex. 


3^ —- 

This is the nnain part of the 
^idea..so(Jnds like 
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Lots of images 
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mobile apps in the real world 



Frank: That first big requirement is a doozy ， isn’t it? I think it’ll help 
to break it down into smaller chunks. 

Jim: Before we do that — what happened to the outstanding item for 
the About Us page and historical background? 

Frank: Oh, right! The wife of the guy who writes bios and 
informational copy for Tartans Unlimited just had a baby. The new 
father has found himself far busier than he expected and isn’t going to 
be able to help out with the project for a while. Big surprise, huh? So 
we’re not on the hook for that one right now. 

Jim: Well, that’s one less thing, I guess. Let’s talk about getting the 
pieces in place to allow users to create their own tartan patterns. 

Not to brag, but I’ve already got a head start on this one. I’ve been 
tinkering with a bit of JavaScript to enhance the form. 


Joe: Cool. That’ll look nice and pretty. But we also need to drop in 
server-side scripts to do the actual work — 

Jim: You server-side guys! Trust me, enhancing the form interface is a 
really significant improvement. 


Joe: Anyway, I’ve been working on the PHP scripts. What about the 
events stuff? 


Jim: Actually, is it OK if we focus on getting the tartan generation 
nailed and circle back on the events searching when we’re feeling 
ready to think about it? I only have room in my brain for so much at 
one time. 


Frank: I guess that’s fine as long as we get cracking on the custom 
user tartans stuff right quick. We’re on a pretty tight timeline. 


To-dos: custom user tartan pattern implementation 


Hcvc^s ouv mastev "to-do 
|is*t -fov dus*tom 


I/Vcll s*ta\rt heve. 




Enhance the form we built to take advantage of capabilities of newer 
mobile browsers. 


-tavta^s 


Drop in server-side code for processing the form and generating 
resources (images, HTML, etc.) for user-created tartans. 


Make sure the offline experience for this part of the app is acceptable. 
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nifty enhancements 


Ready, set enhance! 

Strap yourself in. We’re about to make a lot of nifty enhancements 
to the Tartanator’s create form — in very short order. 


We did the right thing 

We designed our form for the baseline experience: 
we’re not leaving anyone out in the cold (well, very 
few people, anyway). Take a look at what happens 
if you load up the Tartanator build form with no 
JavaScript at all. 

Now let's enhance 

It’s functional for everyone, but also kind of 
ugly and unwieldy for everyone. While having 
six color-size combo fields is OK for a less 
full-featured browser, it’s an encumbrance for 
more sophisticated ones. 

Now that we have our baseline ducks in a row, let’s 
drop in some enhancements that will make the 
form more of a pleasure to use with smartphones. 


丁 k -(*oV*w» IS 
all - 七 a yod 


^rtanBunder 

# Jdl us» abouc your uman 

• Tanan Name ~~T — 


Bui i*t’s a bi 七 

du 灼 ky on a r^ewev- 
srwav-tpho^c b\rowscv-. 


• Taitanlnfo 

• Build your colors 

• Color Select a Color 

Stitch Count O* 

• Color Select a Color 
Stitch Coam 

^ Color Sclcti 4 Color 

Stitch Count f 

參 Color 麄 Color 

Sdich Count 
• Color j roiAr 

Stitch Count { 



勹 Back Tartan Builder 

Tell us about your tartan 


Tartan Name 


Tartan Info 


artan description 


Build your colors 


First step to a super mobile web app: 
enhance the Ul for the browsers that 
support it well. 


o 

O 




No need to panic about 
writing your own widget. The 
JavaScript is all ready for you. 


Some crackerjack frontend devs 
cranked out this enhancement JavaScript. The devs 
always get so excited and productive when they get to 
work on mobile web app projects! 

We’ll walk you through the highlights (and you can 
always spend some time looking at the code), but you 
don’t have to write it yourself or anything! 



Wlc ddr\ yt 
\rid of 

vcpca*tcd -fields 
a 灼 d ms 七 ead 匕 vea 七 e 
a s'mjlc 
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Make a better form 


Instead of having six fields — both 
cluttered and limiting — let’s use a single 
widget. This will allow our users to add 
as many color-size combos as they like! 
We can do this by using JavaScript to 
remove all of the color-size fields 
except for the first set. 

A custom widget for the 
color select field 

We can override the default select 
interface in the browser and use one 
of jQuery Mobile’s custom select UI 
widgets. That way, we can show color 
swatches for each option. 


The custom j Query Mobile widget 
we’re going to use pops up like a dialog 
to display the color options. 



6ee} Bits 


Fov* dubious 


O^ly or\t doloir-siz^ set ； v\o{, six. 



a Colo/ Y°Y s u ? 
七 Wis tus*tom'iz«d 
-field v/’idy 七 . 


If you’re familiar with jQuery code, the construct $ (document) . ready might be 
something you see (or use!) a lot. The jQuery .ready method is kind of like (though not 
identical to) the browser's body. onload event — when it fires, it indicates that the DOM 
is loaded and ready. jQuery developers typically wrap their code in this so that it doesn’t 
execute before the page’s DOM is ready. 

In jQuery Mobile (jQM), you don’t (usually) want to use $ (document) . ready. Instead, 
jQM introduces some new page-load-related events, the most important of which are 
pageinit and pagecreate. pagecreate is fired after jQuery and jQM have completed 
initializing the DOM of the page, but before widgets are rendered, pageinit is fired after 
widgets are finished, too. And remember that subsequent pages are often inserted into the 
first page’s existing DOM — that means that pagecreate and pageinit events can fire 
multiple times in a single full-page load. 

Confused a bit? So were we. It takes a few minutes for even seasoned JavaScript and jQuery 
folks to fully grasp the concept. Read more in the JQM docs {http://jquerymobile.com/demos). 


also 

ewb -fov- 
ov-'»cy\*ba*t'»oy\, 
dhd 七七 io 〜 




o*tV^cv*s. 
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widgetized colors and sizes 


A widget to manage the list of colors and sizes 

We’ve now removed all but one of the color-size field combos. Using 
that remaining pair of fields, we need to be able to generate an arbitrary 
number of color-size combos. 


To do this, we add a new button: Add This Color. When clicked, the 
currently selected color and stitch count are added as a list element (< 1 i >) 
to an unordered list (<ul>) of current color-size values. We also add 
hidden form fields to the < 1 i > to contain the color and size. 

Clicking on an < 1 i > in the existing color list will remove it and its 
contents from the list. Finally, clicking the “Make it!” submit button will 
generate a tartan pattern with all of the color-sizes currently in the list. 


Build your colors 


JavaSdv-ip-t does all 
o ( 七 his. 


TKc 

tolov-s'iz^ 

-f ield 

a usev- tl'itks i\\t hdA 
TWis Colour butW 如 
tolov *—sizjc tombo is added 
-to *tKc list 

Colo\r-siz^ lis-t 
ul#tolov-l'is*t ^ 


"HiC lis"t b^dk^lrouhd 
v*C-Plcd"ts the du\r\rCh'tly 

乙 hosch dolo\r. 


Dark Gray 


Stitch Count 


4 


o 


Add This Color 


Dark Slate Blue (4) 


Field Green (8) 


White ( 2 ) 



]/\l\\tv\ tiic mpu 七 

value ； d 於 

makes suve 七 he strUh 

dour\*t is ar\ cvcr\ 灼 umbev. 


This is ou\r wo\rka\rouhd 
*Po\r lack o( support 
the step a-t-tv-ibutc 
ihput -fields. 


oh 


Make it! 


Take it fora spin 


Enhanced build.php 
form (detail) 



扣 \itnx 

alv-cady 如 
list vemoves it 


OuV" subw'Vt 灼 


Hey, good news. You don’t have to do 
anything to get the frontend enhancements 

to work. It’s already done for you. 七 he -fovm is ov\ 

The starting point of the code in the 

chapter7 folder already includes the J Also, wc u hookcd up" 

JavaScript enhancements. Go try it out! 〆 the ba^kchd yet; d\tk\^ 

this woh ； t do ahytVmg yet/ 


The bu*t*fcoK> becomes 
visible oi\tt at least oy\c 
dolov--siz^ dombo has 
bccir> added -fco "the list. 


See how it feels in a mobile browser. 
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A peek under the hood 

We promised that you wouldn’t have to write the JavaScript, but it might 
behoove you to get a loose handle on what it’s doing. 


In a nutshell, there are a bunch of things that happen when the page with 
the form on it has been fully loaded into the DOM (pagecreate event) 
and also some stuff that happens after the jQuery Mobile widgets are 
finished enhancing things (pageinit event). 

In these initialization functions, other functions are attached to various 
events (form field changes, clicks, form submit, etc.) to enhance user 
interaction and make our custom widgets functional. 



Get cozy with the code. Take a few 
minutes to go hang out with and 
get to know the updated pieces of 
the Tartanator app, especially the 
updated tartanator.js script. 


♦ 






Match each function in the JavaScript enhancement code {tartanator.js) to what it 
does, and also to the event(s) that trigger it. Reference the comments in the script 
and use your noodle to determine what each of these functions does for us. 

for 

Event that triggers 


Function name 


pnStitcJiSl^eCfcangeO 


st/leC^krListiteni () 


kulldAcUButtPnO 


pnCplorL!stCJiange() 


addC^lorO 


s©tC^krSelectSt/le() 


What it does 

Refreshes the <ul> and <li> elements 
of the current color list. 

Constructs the button to add a color-size 
combo and inserts it into the DOM. 

Sets the background color of the select 
widget to the currently selected color. 

Constructs hidden form fields, puts them 
in a new <li>, and appends the <li> 
to the existing color list. 

Adds a colored CSS border (swatch) to 
the left side of each color select option. 

Makes sure the size value is an even integer. 


pageinit and change 
(color select field) 

click (on Add This 
Color button) 

pageinit 

click (on list element in 
current color list) and after 
new color added to list 


change (size input 
value updated) 

pagecreate 
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exercise solution 


So, that's the frowtewd enhancement 




Enhance the form we built to take advantage of capabilities of newer 


J)oY\c! 


mobile browsers. 


Drop in server-side code for processing the form and generating 
resources (images, HTML, etc.) for user-created tartans. 


up/ 


Make sure the offline experience for this part of the app is acceptable. 


Function name 


♦ 




\L 

T 





AT ， - 


What it does 


Event that triggers it 


pnSt!tcJiSxzeCJiange() 


st/leCpkrLfstitem () 


kuildAddButtPnO 


pnCpkrLfstCtangeO 


addC^krO 


setC^krSelectSt/le() 



Refreshes the <ul> and <li> elements 
of the current color list. 

Constructs the button to add a color-size 
combo and inserts it into the DOM. 

Sets the background color of the select 
widget to the currently selected color. 

Constructs hidden form fields, puts them 
in a new <li>, and appends the <li> 
to the existing color list. 


Adds a colored CSS border (swatch) to 
the left side of each color select option. 


Makes sure the size value is an even integer. 



pageinit and change 
(color select field) 


click (on Add This 
Color button) 


pageinit 


click (on list element in 
current color list) and after 
new color added to list 


change (size input 
value updated) 


pagecreate 
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This week’s interview: 
Enhancement: is it all just fluff? 


Head First ： OK, I gotta ask. We just did a whirlwind 
tour of a bunch of j Query Mobile—specific JavaScript 
interface enhancements. Was it really worth it? 

Interface Enhancement: What j Query Mobile 
makes possible, quickly, with respect to enhancing the 
mobile interface is compelling, sure, but I get your 
drift. Really, I’m trying to illustrate a broader concept 
here. 

Head First: Which is? 

Enhancement ： Regardless of whether you are 
using a framework, designing for a baseline and then 
enhancing is a good philosophy. 

Head First ： With JavaScript? 


Head First ： You’ve overridden the rendering of a 
native form element. The color select field is now 
using a custom j Query Mobile widget. Isn’t that kind 
of taboo? 

Enhancement ： It’s true that messing with native 
form controls is a bit controversial. I don’t argue for it 
as a general rule. However, in our particular case, the 
styling necessary to give visual clues to the user — color 
swatches — wasn’t possible with traditional select fields. 

The underlying markup is still semantically 
appropriate — a <select> element — but we’re 
tweaking it to make it a more usable experience. But 
yes, you are correct in that we should consider native 
form control overrides carefully. 


Enhancement ： Let your mind go a bit here.. .this 
is broader than JavaScript, too. We’re talking about 
starting basic, defining the core experience or content, 
and then making it better — that is, really taking 
advantage of what more powerful mobile browsers 
can do. 

Head First ： By adding bells and whistles. 

Enhancement ： I like to think that my contributions 
are bigger than rounded corners and gradients. We’ve 
taken a somewhat limited and awkward form and 
made it better for applicable users. 


a Color 


St ’ tc h Count 

34 


This color 


build - a - tarba” 
m A^dvo'id b\roy/sc\r 


^•y Dark Grey (10) 
Red ⑻ 


Grey (34) 


Make it! 


About 
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a new generation of tartans 


and wow for the backend 


The starting point for Chapter 7 code has the structure 
shown here. Getting the backend pieces plugged in 
requires a couple of quick steps. 

Copy all of the contents of the extras/scripts directory into your chapter7 
directory. When you’re done, the chapter7 directory should have three new 
files — config.php, generate.php, and image.php — as well as an inc directory (with 
two files inside). 




chapter7 



build.php 

□ 


generate.php image.php config.php 

A quick tour of tartan generation 


css 


□ 

dialogs 

□ 

extras 

圍 

findeventphp 

—圍 

index.php 

□ 

js 

□ 

tartans 

圍 


tartans.php 


IOOI 
IllOlOCi 
OOl 0101 
iOlQiljJ 

Form POST data 


Usm^ data posted 心⑽ 

scales several 



generate.php 



^ XML file 

M )(ML Uc 
^rcpircsch-tihg the tav-bh 
pattcirh is output "fco 

tairtahs/data/. 




HTML file 


ttTML -Pile -Po\r the tav-tah 
is ^caicd ih tav-tahs/. 

i 

TWis _L Ale is based 挪 

-f lic m -ta^r-ta^s/. 




PNG 


f[Y\ c 4 - 

*tav-*tair\ is ou*tpu*t 
as a PN4 
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mobile apps in the real world 


The two sides of generate.php 

The way that generate.php ultimately responds after creating the 
tartan resources depends on how it was requested. 

Requested with AJAX 

For browsers that support AJAX appropriately, the JavaScript 
in build.php posts the form data to generate.php using XHR 
(XMLHttpRequest). If successful, generate .php responds with the 
URL of the newly created HTML file for the tartan. The content 
of this new page is then inserted into the current page’s DOM. 


% VC Su!rc 
io SiAyyo^i mobile 
blrowscirs wiih 
wi£hou{; 

AvM>( suppov-i 


議 

build.php 


Asynchronous request with XHR 


^ Wi*bV> 

POST data .. 


s 七 


new tartan 
HTML URL 



<new-tartan>.html 



generate, php 




I 於七 Wis MV 饮 

a -full-pajc v-cload- T\\t 
dor\*tcr\*t o*f tartar 

is mscv"*tcd 

POM build 阿 . 


Form posted directly 

For browsers that don’t support JavaScript and XHR, the form is 
directly posted in a “traditional” way to generate.php. After generate.php 
creates the tartan resources, the browser is redirected to the newly 
minted tartan page. 


I 灼 loath methods, *tV>c 

,S same ： Create 栋 c 
iayriav\ \rCSOu\rtCS. 


“Traditional” method — redirect to the new tartan page 


雪 

build.php 


POST data 


叫 1 

generate.php 


redirect 



<new-tartan>.html 


lr) ^ method, the 

flight is Ytd^tcitd io 

ca - pay load). 
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lists of tartans 


One last thing! 


Now that users can add tartans, the tartan list as shown on tartans.php is ever- 
changing. Drop this line into the tartans.php file to include a script that will 
output <li>s for each currently existing tartan. 



tbls! 

w 

平 


<ul data-role= n listview n data-filter= M true n > 

<?php include('inc/list.php▼); ?> 

</ul> 



tartans.php 



Go create some tartans! Create half a dozen or so 
tartans of your own using the form on build.php. 
Your creations should appear on the tartans 
landing page (tartans.php). 


D 


tJiereicir 

>umb 


e no o 

Questi9ns 


Help! Something’s not working right! 


About that XML. What the heck is that? 


If you are having trouble getting your tartan build form to 
work, or aren’t seeing any created tartans, here’s a few things 
to check. 

First, make sure that the fa/tans/directory exists and that it and 
all of its subdirectories can be written to by your web server’s 
user. Also verify that the tartan-template.php file is in the tartans 
directory. Finally, double- and triple-check the <form> tag in 
build.php for the correct action and method. 

How does the tartan list page work? 

The list.php file included in the page looks at the current 
HTML files in the fa/tans/directory to generate its list. For each, 
it grabs its associated XML file (in tartans/data/) to get further 
information, like the pretty display name. It then outputs an 
<li> for each tartan, with a link to the tartan’s HTML page. 


We chose to store the data representation of tartan 
patterns as XML for a couple of reasons. One, it’s a nice, 
simple, portable data format. Two, it obviates the need to use a 
database (less work for you!). 

By the way, what is this whole super mobile web 
app thing you’re talking about? Some kind of standard or 
initiative or something? 

Nah. It’s just something we started calling mobile web 
apps that seem like they take good advantage of the neat things 
mobile devices and their browsers have to offer. 
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mobile apps in the real world 


Two out of three is a great start 

We’ve taken some good steps toward a super mobile web app. 
We’ve enhanced the baseline interface to take advantage of 
sawier browsers. And now the app does something! 


"7^ Enhance the form we built to take advantage of capabilities of newer 
mobile browsers. 

'/ Drop in server-side code for processing the form and generating 
resources (images, HTML, etc.) for user-created tartans. 


Make sure the offline experience for this part of the app is acceptable. 

後 -to deal with 

Now we have to deliver on the third piece of the tartan-creation 
implementation : the tartans need to be available offline. 



Put weVe not done yet 




Frustrating. I want to show a friend the tartan 
I designed a few minutes ago...but I have dreadful 
phone service in this building. I can’t get a 
connection...and now my tartan won’t show up. 



A stable — or even existent — 
network connection is 
something we just can’t take 
for granted with mobile devices. 

We’ve got to do something to make tartans 
available without an Internet connection. 
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offline storage 


Offline is important 

Part of giving a good experience to your users is making 
your websites and apps behave when there isn’t an Internet 
connection to be had. 

For the Tartanator, we need to step back and figure out how 
we can make things work better for our disconnected users. 
We need to make certain things available offline. 



How do we control 
whafs available offline? 
Is that even possible? 


We can use something called a cache manifest to define 
which pieces of our app should be available offline. 

Make it manifest 

Application cache is part of the HTML5 specification. It allows for control 
over which web resources are cached for offline availability through the use of 

a cache manifest. 

A cache manifest is a specific type of file on a web server that gives instructions 
about how or whether certain web resources should be cached on a user’s 
device. By creating a cache manifest, we can dictate which things are available 
offline for the Tartanator web app. 

Browsers that implement application cache — or app Cache, as it is almost 
universally shortened to — also provide the window. applicationCache 
object and its various events, which we can access and manipulate with 
JavaScript if we like. 


Support for app Cache is fairly widespread in current browsers, with the 
notable exceptions of Internet Explorer 9 and Opera Mini. Using a cache 
manifest won’t cause problems for these browsers; they just won’t pay 
attention to it. 





Can you think of why it would be difficult for 
Opera Mini to support application cache? 
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mobile apps in the real world 


A basic recipe to create a cache manifest 

There are three general steps to creating and using a cache manifest 
on a website or app. 


o 

❺ 

❺ 


Write a cache manifest file. 


Add a manifest attribute to the <html> tag of the applicable 
pages with a URL (relative is fine) to the manifest file. 


Make sure the manifest is served as the correct type of file. 




TV 仑一七 a 

of 七 cxVuAe - waWes 七 ，ov I 七 

Y/On’ 七 V/OV"k. 


The deceptively simple syntax of a cache manifest 

A simple cache manifest file is quite basic in appearance. You list the items you 
want cached under the (technically not required, but definitely good practice) 
CACHE : heading. 

TWis I'rnc, wloa 七 u \rc«\uivcd. 



URLs ^ 

be v-clativc 

(like heve) o\r 
absolute (c.a., 

http://• 


CACHE MANIFEST 
# comments look like this 

CACHE : 

index.html 
foo/bar.html 
baz.html 
css/styles.css 
icons/plus.png 


TWis -f ile docs^i ^avc -b 

be y\d^cd 
七 he preferred 

is .a 代乙 aAc. 


manifest.appcache 




Next, you update your web page(s) by adding a 
manifest attribute pointing to that file. You also 
need to make sure the file is served as the correct 
Content-type (aka MIME-type). You can often 
do this simply with Apache by adding the following 
to the Apache configuration file or, more likely, an 
.htaccess file on your website’s filesystem. 

This -tells -the y/cb scv-vc\r h> 
sewe -Piles m affdadhe as the 

■toc-t/dadhe-rwahi-fes-t -type- 


<!DOCTYPE html> 

<html manifest="manifest.appcache"> 

<head> 


AddType text/cache-manifest .appcache 


TKc -file Kas -to be of type, 
ov bvoy/sevs y/or / 七 it 


.htaccess 


you are here ► 


285 













cache me, baby 


UwfortuwatGly, the devil is in the details 

In theory, cache management using a cache manifest file is straightforward. 
List the things you want available offline, add the manifest attribute to 
the <html> tag of a page or pages, and let the caching begin! 

Don’t start panicking quite yet, but creating a cache manifest and getting it 
to work the way we really want it to can be a bit confusing and sometimes 
frustrating. There are a fair number of details and gotchas that can trip you 
up. It helps to have good tools to help you inspect and debug what’s going on. 


Pev tools to the rescue 


WebKit provides a tool called Web Inspector, which is available in both 
Chrome and Safari (being WebKit-based browsers). You can see great 
details about appCache information in the Resources tab. 


pctaild 七 ^ Rcsou^rtcs 
m-fo dbou 七 

( m CWowc- 



® (f ^ a □ 

Network Scripts Timeline Profiles Audits Console 


Search Resources 


▼ rn Frames 

► CD (tartans.php) 

▼! Databases 

▼ Local Storage 

localhost 

▼ i -： Session Storage 
► ^ Cookies 

▼ 连 Application Cache 


localhost 



developer 
"tools look almost 

racily -the same. 


Resource ▲ 

Type 

Size 


http://codejquery.eom/jquery-l.6.4.minjs 

Explicit 

89.89KB 


http://code.jqiiery.eom/mobile/l.0rcl/images/ajax-loader.png 

Explicit 

777B 


http://codejquery.eom/mobile/l.0rcl/images/icons-18-black.png 

Explicit 

2.29KB 


http://code.jqijery.eom/mobile/l.0rcl/images/icons-18-white.png 

Explicit 

2.42KB 


http://codejqLjery.eom/mobile/l.0rcl/images/icons-36-black.png 

Explicit 

3.59KB 


http://codejqiiery.eom/mobile/l.0rcl/images/icons-36-white.png 

Explicit 

4.20KB 


http://codejquery.eom/mobile/l.Orcl/jquery.mobile-l.Orcl.min.css 

Explicit 

46.48KB 


http://code.jquery.eom/mobile/l.Orcl/jquerv.mobile-LOrcl.minjs 

Explicit 

77.20KB 


http://localhost:8888/git/HFMWChapter7/chapter7 / 

Master 

1.90KB 


http://localhost:8888/git/HFMWChapter7/chapter7/css/styles.css 

Explicit 

574B 


http://localhost:8888/git/HFMWChapter7/chapter7/index.php 

Explicit 

1.90KB 


http://localhost:8888/git/HFMWChapter7/chapter7/js/cache-manager.js 

Explicit 

2.11KB 


http://localhost:8888/git/HFMWChapter7/chapter7/manifest.appcache.php 

Manifest 

798B 


http://localhost:8888/git/HFMWChapter7/chapter7/tartans.php 

Explicit 

2.35KB 




It can be easy to get yourself in a jam working 
with cache manifests. 

Cache manifest behavior can be tough and confusing to 
debug, and malformed cache manifest files are difficult to 


li t^y\ be d bit paih-ful 
bry -to excise poovly 

•foiled appCadhcs W 
•mobile devils. 



find and remove without the right tools. We recommend 
using either Chrome or Safari for building and testing our Tartanator 
cache manifest. Also note that appCache isn’t supported by Internet 
Explorer before version 10, which at the time of this writing is still in 
developer preview. 

It will also help you save your sanity to develop and test on a desktop 


browser first before moving to a mobile device. 
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mobile apps in the real world 


Serve the manifest as the correct cowtcwt-typc 



Ive never messed around with 
.htaccess files, and I don't even 
know if I can do that with my 
current web hosting service. 


It’s highly likely that you can use .htaccess 
files on your hosting provider or local web 
server. But we won’t make you. 

We do know you can use PHP. So, we’ll generate our cache 
manifest files using PHP and use a snippet of code to set 
the file’s content-type to text/cache-manifest. 


ExdRciSe 


Implement a basic cache manifest for the Tartanator. 


o 

❺ 


Name your file manifest.appcache.php and put it in the chapter7 directory. 

V The .php cx-tchsioh is needed 

= 卜 t the 

Add the following line to the top of the file. PnP todt ih the -Pile. 


<?php header('Content-type : text/cache-manifest'); ?> 



This sc*ts do^*tc^*t--typc o-f output 
o( this sdv-ift *to 


o 

o 


Add a cache : section and list the main pages of the site, as well as the JavaScript 
and CSS files. J 

-to the syntax 
oy \ page 

Update the <html> tag on index.php, build.php, tartans.php, and findevent.php with 
a manifest attribute. 
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cache headaches 



The manifest.appcache.php file you created should look something like the one below. Note that 
we’re also listing the CSS and JavaScript files from jQuery’s content delivery network (CDN). 


<?php header('Content-type : text/cache-manifest'); ?> 
CACHE MANIFEST 


CACHE : 
index.php 
build.php 


h additioh -to vdaiivc URLs io 

^ or> you\r … 


..you use absolute WRLs 
-bo demote WOU 伽⑽ 

^ doma'ms i\\ai you *to ㈡ 乩 c. 


tartans.php 
findevent.php 
css/styles.css 
j s/tartanator.j s ^ 

http :// code.j query.com/mobile/1.Orel/j query.mobile-1.Orel.min.css 
http :// code.jquery.com/jquery-1.6.4.min.j s 

http :// code.iquery.com/mobile/1.Orel/iquery.mobile-1.Orel.min.j s 


^ The ttT/V]L tag oy\ 七 he Tav-taha-fcov 
f pays should now look like 七 his. 





manifest.appcache.php 


<html manifest="manifest.appcache.php"> 

— 



I think rm doing 
something wrong. A lot of 
images and icons aren’t showing 
up, even when I*m online. 


/\ -b\radc-o^-f usm^ PHP *to 

achate ouv Mtsi is 

议 tant use 

•a 代 taAc 
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Cache Manifest Bxyosedi 

This week’s interview: 

Bending appCache to our will 


Frustrated Web Dev ： Argh. As I navigate around 
the Tartanator site, a bunch of images and icons and 
stuff aren’t showing up, even though I’m online. 

appCache ： Well, that’s because you neglected to 
include some of these resources in the CACHE list. 
You should go round them up and add them to the 
cache manifest. 

FWD ： So, I need to list every resource on the site or 
they won’t show up at all? 

appCache ： No. You need to add the resources that 
are needed by the HTML files in the cache. 

FWD ： I’m totally confused. What does it even mean 
for an HTML file to be in the cache? 

appCache ： You already know one way to include 
an HTML file in the application cache: listing it 
explicitly in the CACHE section of the manifest 
file. But it’s also worth noting that any HTML 
file that has a manifest attribute on its HTML 
tag is included in the cache manifest, even if it’s 
not explicitly listed there. Only those pages listed 
in the manifest or referencing it in a manifest 
attribute — that is, in the cache — need to have all of 
their resources added to the cache list. 

FWD ： OK, so for any page in the cache, if I neglect 
to add each and every resource to the CACHE 
section, any missed resource won’t ever load, even if 
I’m online. 



appCache ： Well, that’s not exactly true, either. 

I gather you’ve learned about the CACHE section, 
but haven’t heard anything yet about the NETWORK 
section. 

FWD ： What’s it for? 

appCache ： The NETWORK section lets you define 
resources that you don’t want to cache, and for 
which the browser should request fresh copies when 
a connection is available. It has a special handy- 
dandy wildcard token, *, which means that anything 
not explicitly listed in the CACHE section should be 
retrieved from the server. 

FWD ： Eureka! That sounds like the answer I need 
here. 

appCache ： Take caution. If something is in the 
NETWORK section, either explicitly or by dint of the 
* wildcard, it will always be requested afresh. So you 
need to choose your path carefully. 

Decide what things should really be available offline 
and list them in the CACHE section. It sounds like 
you do need to track down some icons and images, 
for example. But for things that really are dynamic — 
login screens, API calls, etc. 一 let the NETWORK 
wildcard do its work. 


Can you think of some parts of the 
Tartanator web app that we might not 
want to make available offline? Why? 
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dynamically output tartans 


o 


0 


We need to make the tartan 
pages and images work offline, so they 
need to be added to the CACHE section. 
But how can I do that when I dotVt know 
what their URLs will be? 





Feels like a chicken-and-egg 
problem, huh? 

Fortunately, we’re using PHP to generate our 
manifest file, so we can drop in some code to 
dynamically output a list of all of the tartan 
HTML files and images that currently exist. 

Find the snippet of PHP code to dynamically 
generate the list of images and HTML files 
in the chapter7/extras folder. It's in a file 
called current file list.txt. 


+ 




this! 

w 


U—. 

Changes to any of the resources listed in the 
manifestos cache section will not be 
downloaded by browsers unless the cache 
W&tcll it! manifest file itself changes. 

j We have css/styles.css in our manifests cache section. 

I Therefore, we could edit styles.css until the cows come home，but 
browsers won’t see those changes. Once an item is in the cache, it 
will only be refreshed if the cache manifest file itself changes. 


A common method for managing this is to use a comment line in the 
manifest file with a version number. Simply changing this version 
number will cause browsers to see that the manifest has changed, 
download it afresh, and check whether any of the resources within it 
are new or modified. 



RcwcwIdcv* 七 ha 七 


The PHP code well use to autogenerate a list of current tartan 
images and HTML files has the happy side effect of causing the 
manifest file to be updated when new tartans are added. But, after 
implementing appCache, well need to increment the version number 
if and when we change other files. 
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o 


It’s easy to create cache manifests that are, shall 
we say，not quite what we intended. 

Remedying a wayward appCache is easiest in the Chrome 
browser. Type chrome : //appcache-internals in 

the URL bar, and you will see information about all current appGache data. 
Each site cache has a simple Remove link. 

In Safari, go into Preferences and select the Privacy tab. You can either 
Remove All Website Data wholesale, or use the Details button to search for 
the problematic site and remove its cache. 

In Firefox, go to Preferences ^ Advanced ^ Network. There is an area in 
the Offline Storage subsection that lists all sites that have stored data for 
offline use. You can selectively remove the appGache here. 




It’s time to make our cache manifest behave a bit better. Let’s integrate 
some of the lessons we’ve learned into the manifest.appcache.php file. 


o 

❺ 


Track down the missing static icons and images. 

There are some icons and images, used by jQuery Mobile, 
that we need to add to the cache section. 

Add the NETWORK ： section and the wildcard. 

Put this above the cache : section. 


Audios i-f you a 
buW alv-cady 

*m i\\t cav-l'icv s-tcff 


NETWORK : 
* 


o Add the PHP snippet. 

Add the code from extras/current_f\\e_\ist.txt to the end of the 
cache manifest file. 



Remove build.php and findevent.php from 


- * 


the manifest. 

Come to think of it, these are resources that should only be 
available when the user is online. The Events page doesn’t 
do anything yet, but it will. Soon, even. 


Doh’t -fovgc-t -to remove 

卜 mahi-Pcst atVibuic 

徉。啪 the -bg oh 

these pages. 
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cache solution 


SoLutvort 


manifest.appcache.php should look about like this now. 

<?php header('Content-type : text/cache-manifest 1 ); ?> 
CACHE MANIFEST 

Make suv-c v° u (W*t have a”Y 

NETWORK : \\nts kc*t>WCC\r\ \icadcv*0 lnr\C 

* 扣 d 如 CACttt MANIFEST Imc. 


CACHE : 

http :// code.jquery.com/mobile/1.Orel/jquery.mobile-1.Orel.min.css 
http :// code.jquery.com/jquery-1.6.4.min.j s 

http :// code.jquery.com/mobile/1.Orel/jquery.mobile-1.Orel.min.j s 
http :// code.jquery.com/mobile/1.Orel/images/ajax-loader•png 
http :// code.jquery.com/mobile/1.Orel/images/icons-18-white.png 
http :// code.jquery.com/mobile/1.Orel/images/icons-18-black.png 
http :// code.jquery.com/mobile/1.Orel/images/icons-36-white.png 
http :// code.jquery.com/mobile/1.Orel/images/icons-36-black.png 
index.php 
tartans.php 
css/styles.css 


<?php // The PHP code snippet from the current—file—list•txt file 
// goes here. We 1 re not showing it to save space.?> 

Now, save the file and try it out! 



A single problem with a cache manifest 
can cause the whole thing not to work. 

'f t * V .tf Just what you need, more gotchas. But you should 
Wcilvll 11. know that if a single resource in the manifest 

results in a 404 (not found), the entire manifest will 
be disregarded. Similarly, a single syntax goof can render the 
whole thing useless. 


You can protect yourself. Use the handy-dandy manifest 
validator at http://manifest-validator.com/ and keep an eye 
on your developer tools windows to make sure none of the 
referenced resources is missing. 
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Confusing. I think it mostly 
works, but when I add a new tartan, it 
doesn’t show up on the tartans list page 
right away. I have to reload the page. 
Thafs not quite right, is it? 


Even though the cache manifest file 
has been updated, you have to reload 
the tartans list page (tartans.php) 
before you can see the newest stuff. 
What gives? 
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update, don’t reload 



Frank: I went and read up about this. I admit I got a bit sucked in. 
Here’s how it works. Say your browser already has a cache manifest 
file for the site. Then say you visit the tartans listing page again later 
after new tartans have been created. Your browser will notice that 
the cache manifest file has changed — it’s different from the one the 
browser already had because the list of tartan files in it has changed. 
Your browser will immediately grab the new manifest file and check for 
updated or new stuff. 

Jim: Then why the heck doesn’t the updated or new stuff show up 
right away? 

Frank: The browser doesn’t wait around for all of the resources that 
are updated or new to download before rendering the page. Once the 
browser does finish downloading stuff, the new or updated assets are 
ready to go, in the browser’s cache, but won’t show up until the page is 
refreshed. 

Jim: So, the only way for folks to see updated things is to reload. 

Frank: Well, I think I might have a workaround for this particular 
situation. I wrote a tiny little JavaScript tool — 

Jim: Always with the JavaScript! 

Frank: The part of the page that’s dynamic is the stuff that gets output 
by the PHP file included in it — that is, list.php.lt outputs one <li> per 
tartan. The rest of the page is static. We really only care about updating 
the contents of the tartan list <ul>. 

Jim: True. 

Frank: My code uses the window. applicationCache object 
and its methods to see if there has been an update to the cache — which 
there will be if the manifest file has changed, right? If there has been 
an update, we want to get the updated output from list.php. 

Jim: Right. If the cache manifest has updated, we know the tartan list 
should be updated. Preferably without the user having to reload the 
entire page. 

Frank: Yeah. So, if there has been an update to the cache manifest, my 
code sends an AJAX request to list.php. list.php isn’t in the manifest and, 
when requested directly, will always return HTML markup representing 
the current list of tartans. I then take the markup returned by list.php and 
replace the current — that is, stale — list on the page with it. Voila! 
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^Tesr Drii/q 


Let’s take Frank’s little JavaScript library for a spin and see if it helps us wrap up this 
complex adventure with appCache. 

o Go grab the little library. 

Copy cache-manager.js from the extras/js folder into chapter7/js. 

❺ Include the script in the Tartanator pages. 

Include the cache-manager.js script right after the j Query Mobile script on 
index.php, build.php ， findevent.php ， and tartans.php. 


<script src="js/cache-manager.js" type="text/javascript"X/script> 


o Add this JavaScript snippet to tartans.php. 

This code indicates that we want to ensure fresh content for the 
#tartans-list element inside of the #tartans_page page 
content <div>, using data returned from inc/list.php. 



<div data-role="page" id= n tartans—page n > 

<script type="text/j avas cript" charset="utf-8"> 
var tartanPage = $ (’ #tartans^page▼); 
tartanPage.live('pageinit', function () { 

if (!tartanPage.data.cacheManager) { 

tartanPage.data.cacheManager = new CacheManager (丨 #tartans—page 丨 ）； 
tartanPage.data.cacheManager.ensureFreshContent('#tartans-list', 

1 inc/list.php'); 

} 

})； 

</script> 



tartans.php 
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a real cache 


If you can use a wildcard in the 
NETWORK section of a cache manifest, 
can’t I just use a wildcard in the CACHE 
section to cache everything on my site 
and leave it at that? 

For better or worse, you can’t use 
wildcards in the CACHE section. The 
special wildcard token is only for the 
NETWORK section, and it’s not really a 
wildcard. You can’t combine it with any other 
text patterns—it is a standalone thing with a 
specific meaning (which is: unless a given 
resource on the site is listed in another 
section explicitly, request it over the network 
when possible). 

What is the point of making it so 
that pages with a manifest attribute 
in their HTML tags get cached even if 
they’re not listed in the manifest? 

This can indeed cause confusion and 
headaches. But the idea is that instead of 
downloading and caching a bunch or all of 
the pages on a given site in one go, pages 
can be added to the cache lazily"—that is, 
they get added to the cache when the user 
visits them first. 

What’s this about “all in one go ”？ 

When a browser gets a new or 
updated cache manifest file, it immediately 
starts downloading all of the new resources 
and/or checking for updates to existing ones. 
This is something to consider, seriously, 
when designing your cache manifests. 


tJiereiare no ^ 

Dumb Questi9ns 


Our manifest contains all of the 
tartan images and HTML files. Isn’t that 
an awful lot to download all in one go? 

We agonized over that a bit. It is a 
fair number of HTTP requests, yes. But 
the files are rather minute: most of the 
images are under 1 KB and the HTML files 
are even smaller. So, the bandwidth hit is 
small, and, because the resources are being 
downloaded asynchronously, the impact on 
the user should be minimal. 

Does the browser redownload 
everything in the manifest every time it’s 
updated? 

Thankfully, no. The browser will check 
to see if the resources it already has cached 
have changed but will not download them 
again unless they’ve been modified. 


All of this is well and good, but 
what happens if the user’s browser 
doesn’t support appCache? 

The site basically behaves like it did 
before we added a cache manifest. It works 
fine, but won’t have a nice offline experience. 

You totally didn’t mention the 
FALLBACK section. 

In addition to the CACHE and 
NETWORK sections, there is an optional 
FALLBACK section that allows you to list 
the offline variants that should be used when 
an online variant is unavailable—for example, 
use offline.html instead of login.html. 

appCache is nice, but what about 
localStorage? It feels like only half of the 
story here. 

Hey, smartypants! You’re ahead of us. 
We’ll come back to localStorage in Chapter 8 
(and if you’re new to the term, no worries!). 



Watch out for implicit caching 
via the manifest attribute. 

We mentioned it already, but we’re 
going to pound it home: any page 
that has a manifest attribute 


on its <html> tag will be cached, whether or 
not it’s listed explicitly in the cache manifest. 
And, no, you can’t get around this by using the 
network section or any other trickery. 
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Victory is (finally) ours 


Phew. It was a bit of a battle, but we now have the Tartanator working offline. That 
means we’re done implementing the custom tartans piece of phase 2. 

Enhance the form we built to take advantage of capabilities of newer 
mobile browsers. 


Drop in server-side code for processing the form and generating 
resources (images, HTML, etc.) for user-created tartans. 


\/ Make sure the offline experience for this 
part of the app is acceptable. 


loda*tior>— av/av-c 

It's time for some Searchable events 



Congratulations, you 
just successfully bent 
啦 Cache to your will. 

Writing cache manifest files that do what 
you actually want them to do can be 
tricky~you did it! 


The other chunk of phase 2 is the building of a 
page that lets users search for local tartan-related 
events near them. 



TKc Fmd Events -fovm 七七 

v/C y/av>*t *to build- 


We want to find events that 
are close to the user’s current 
position. That means we’ll need 
to talk about geolocation. 
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it’s not just gps，you know 


How geolocation works 

Geolocation from a web browser involves using JavaScript to 
obtain the device’s current position. Many modern smartphone 
browsers implement the World Wide Web Consortium (W3C) 
Geolocation API, which provides a straightforward interface for 
getting at geolocation data. There are a few other contenders in 
the mix, including the now-deprecated Google Gears API and 
some proprietary APIs. Older phones and even some modern 
smartphones don’t have geolocation support in the browser at all. 




k 




<■ 

f 、 


Although the first thing many people think of 
when they hear the term geolocation is GPS (global 
positioning system), there are in actuality many 



Cell towers 

24.21.168.0 




Device’s IP address 



RFID tags 



additional sources for the location of a device, 
including nearby WiFi networks, cell towers, 
the device’s IP address, RFID (radio frequency 
identification) tags, and WiFi or Bluetooth MAG 
(media access controller) addresses. 


00:0D:93:00:00:00 

MAC addresses 
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How to ask W?C-compliawt browsers 
where they are 


Browsers that implement the W3C Geolocation API make the feature 
available via the navigator . geolocation object. The most 
relevant method on that object is getCur rent Posit ion, which 
attempts to do what it sounds like it would do. 

Tvy -to yt 七 he 
position of -the device- 


navigator.geolocation. getCurrentPosition(successCallback, errorCallback); 


TKc o( a JavaSoft W 七丨 

•fco tall i*f a fos*it»or\ is olcrta.med. 



The hamc Jc a JavaSdv-ipi 
-Puh^tioh "to ca\\ i-f ay\ 
C\r\ro\r is Chdouhtcv-cd- 


Handling the info getCurrentPosition gives us 

When a location is successfully determined, the function that was 
given as the name of the success callback will be called and given a 
position object. We get at the info we really care about — latitude 
and longitude — by looking at the latitude and longitude of 
the coords attribute of the position object. 


The sUUss dallbddk -Puhdti 


loh 




TWis position objcd*t tor\*t3ms 
■tiiC WC need. 


T\\t w>os*t \>cv-t'mcn 
a*t*tv"ibu*tc o-f *tV)C 
position is 
dooV"ds objcfi-*t... 



function successCallback (position) { 
var coords = position.coords; 

alert(coords.latitude + ', ' + coords.longitude); 




… and 七 he mos 七 pc\rt*mc^i aliv-ibuics oy \ ihc 
Coords objed-t a\rc la-ti-tudc and lo—iude. 




The CV\ro\r ^allbad -Pu^dtio^. {( 

v/c^i ii’s dal led. 

function errorCallback(error) { 
alert (error.message); 


simply (dy\d somewhat 
JavaSdv-*»ft alcv-t 
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geolocate your code 



Geolocation JavaScript Magnets 

Place the code magnets in the correct positions in the geolocation 
JavaScript below. You can only use each magnet once, but you may 
end up with a few that you don’t need. 


navigator.geolocation 


longitude 


c °ords ] 







onGeoSuccess 


Browser doesn't support geolocation M 



1 

position 

getCurrentPosition() 

^ 4-*D o A 


getLocation 



function getLocation () { 

// Verify the browser supports W3C geolocation 


if ( 

){ 



navigator.geolocation. 


( 

, onGeoError); 

} else { // It doesn't 




onGeoError(new Error ( 



))； 


function onGeoSuccess ( ) { 

var = .coords; 

alert(coordinates. + ', ' + coordinates. 



function 


(error) { 


alert (error. 




► i\pswers onpa^e 302. 
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Start iw ow the Find Events page: The baseline 


The idea of the Find Events page is just that: to find events. We now have a 
peek into how to find a user’s location with JavaScript in applicable browsers. 
But we’ve been taking the approach of creating a baseline experience first. 
What if a user’s browser doesn’t have JavaScript or geolocation? 

Let’s start basic and create an events search form that doesn’t require either 
of those things. Providing a simple list of US states in a select list will be our 
baseline default. 


A sclcd-t clcr^cht 

with the av\d 
ID W s-btc -filtcv- 


A vc\ry simple 
(o\r sca\rdhihg -fov- 
cvehts by s-btc 




Build a simple events search form on findevent.php to use as our baseline. 
Put the form inside the page content <div>. 


Give the form a method of get and an id of search—form. 
Set the action attribute to events . php. 



VVcII sV^ov/ Y ou 
*to -f md cvcw*bs 
m just d bit 


Add a select input element.The displayed options should show ， us__s-tatcs.txt m the 
the name of the 50 US states. The values should be the two-letter c^tv-as/events di\rc^-to\ry 

postal abbreviations of the states. Wp you alo^g. 

The submit input button should have an id of search submit. ^ap the 

— ^'clds ih a <div> with a 

da*ta-\rolc o( -Piclddohtaih 

(the j 酬 way). 
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i see where you’re coming from 



Geolocation JavaScript Magnets Solution 

Did you manage to place the magnets in the right position? 


function getLocation () { 

// Verify the browser supports W3C geolocation 
if ( 


navigator.geolocation I ) 


navigator.geolocation. 
else { // It doesn't 


getCurrentPosition ( I onGeoSuccess I ' onGeoError) 


onGeoError(new Error ( 


'Browser doesn't support geolocation ”）） 


function onGeoSuccess ( 
var 


coordinates 


position I) 
position coords 


alert(coordinates./ iatitud 


e 


coordinates . I longitude 



Once you’ve constructed this code, put it in a file called 
geolocation.js in the chopter7/js/directory .Then include it in 
the findevent.php page by using a 〈 script 〉 tag within the 
<div> with data-role="page". 


I 七 should 


5 ° 叫卜 

*thc scavdh +o\rm. 


七 above 


/ 


d\dy\ l i hCCC ( 
"these 


coords 


getCurrentPosition( 



302 Chapter 7 
































































mobile apps in the real world 


Lcfs iwtcgratG geolocation 


We now have a basic form. Oh, and some really annoying 
JavaScript alerts. 

Let’s do the fun part: dropping in geolocation for browsers 
that support it. Here’s what the form will look like for enabled 
browsers after our next set of changes: 



Out ^ up ouv 

uSC \rs Y/rth Wov/scvs i\\^i 

su^o^rt ^coloda-tio^ Will be 
able *bo use i\\tW 
lod.atioy\ *to cvwU. 



Gresham Tartan 


Find Events 


Choose State 


Find Events 


About 


Use my Location: 


Filter by State: 


Tartans 



Your basic form should look like this. 

<div data-role= M content M > 

<script type= M text/javascript，' src="js/geolocation.j s"></script> 

<form method= M get n action= M events.php" id= n search—form n > 

<div data-role="fieldcontain"> 

<label for= M state_fiIter">Search by State</label> 

<select id= M state_filter" name="state_filter"> 

<option value= M M >Choose State</option> 

〈option value= M AL M >Alabama</option 〉 

〈丨 — ETC —〉 

</ select> 

</div> 

<div data-role="fieldcontain"> 

<input type="submit" value= M Find Events" id= n search 一 submit，， / > 
</div> 

</form> 

</div><!-- / content --> 


you are here ► 


303 









geolocation construction 



6E0L0CATI0N CONSIRIJCIION 

We’re going to fancy up the code in geolocation.js. Let's walk through the highlights. 


(function () { 

var $page, $searchForm, $submitButton, $stateFilter; 



$page = $(▼#event_page'); 
if (!$page.data.initialized) { 

$page.live('pagecreate ', initGeo); __ _ 

$page.data.initialized = true; 


i\\C fay m'rtiariz^s, 
dall 


K b\rowsc\r supports 

ihixializ^ -the gcolodatioh—\rcla-tcd 
clcmchts. 


function initGeo () { 

$searchForm = $('#search form'); 

$submitButton = $('#search_submit'); 

$stateFilter = $('#state_filter'); 
if (navigator.geolocation) { 
initGeoOptions(); 

} 

} 

function initGeoOptions () { 

var $latField, $longField, $flipSwitch; 'N 

$f lipSwitch = $('〈select name= n usegeo n id="usegeo f, a sridcr-*t^cw'cd 

data-role= n slider"Xoption value= M off">0ff</ oy\/<Jc( sy/i*b^ii *to lc*t 

of f Xoption value= n on n >0n</optionX/select> ' ) . usevs of*b m •to us'm^ 

change (toggleLocation); 七 ^ f ^^…七 kaW. 

$flipSwitch.prependTo($searchForm).wrap('<div data- 
role= n f ieldcontain n x/div> '); 

$flipSwitch.before('<label for= M usegeo n >Use my 

Location : 〈 /label 〉，）； / Add two hidden -fields 

$latField = $ ( ' <input type= n hidden" / > ' ) . attr ({ name -to hold the value o-f 
: 'latitude ’，id : f latitude' }) latitude av\d lo—tude 

$longField = $ ( ’〈input type= n hidden f, /> ' ) . attr ({ -fv-om the gcolotaiio^. 

name : 'longitude ', id : 'longitude' }) 


$1atField.appendTo($searchForm); 
$longField.appendTo($searchForm) 
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■to^lcLodatio^ is bour>d 

•to h\t dKair>3C cvcr>*t OY\ 

七 I 化 slldcv- SY/i*tdK. 

function toggleLocation(event) { 

var geoActivated = ($(event.target).val() 

: 'on') ? true : false; 

if (geoActivated) { ^ " 

$submitButton.button('disable'); 
$stateFilter.selectmenu('disable'); 

$.mobile.showPageLoadingMsg(); 


W user just -flipped i-c Oh, 

disable the siaic Uicr, a^d 
disable the submit bu-t-toh fit 
will be vcchablcd wheh -the 

0Colod3*tioh is dornplctc). 


it 


navigator.geolocation.getCurrentPosition( 
onGeoSuccess, onGeoError); 

} else { 

$stateFilter.selectmenu('enable'); 
$submitButton.button('enable'); 

} 

} 

function onGeoSuccess(position) { 
var coordinates = position.coords; 

$('platitude').val(coordinates.latitude); 

$('^longitude').val(coordinates.longitude) 

$.mobile.hidePageLoadingMsg(); 

$submitButton.button ( 'enable'); 

} 

function onGeoError (error) { 

$(▼#usegeo') .val ( 'off') .trigger('change'); 
alert(error.message); 


}) 0 


Hcvc^s y/heve wc *tv*i^cv- 
七 he ^coloda*tior>. 

it's vcc^ablc 

•f il 七 ev by state- 

ftc\rc ； s ou\r suddess dallbddk. 

後、 altcv-cd it -to update 
七 he l 3 *ti"tudc 3 hd loh^i^udc 
hiddeh -fields With -the 
uw’s lodatioh data. 


0 y\ slide use 

acolotatio^ katk -to 

*tV^c o-f-f position i*U 

Aa 呼 cv ⑼七 UWA is kouy>a 
{jo -bo^lcLo 6 at»oy\ above). 


Try it out! Play with the form 
to get a feel for what the new 
JavaScript does for us. 


You can find this code in the 
chapter7 folder in extrasljsl 
enhanced_geo_formJs. 

Update the geolocation.js file, save it, and try 
out the updated Find Events page. 
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visit the library 


Jim: I was just checking out the geolocation piece on some devices. I know that 
the BlackBerry OS 5 browser is supposed to have geolocation, but the Use My 
Location switch isn’t showing up. 

Frank: Yeah. The BlackBerry OS 5 browser supports geolocation, but it isn’t the 
W3C flavor. I was just looking this up. And older Android browsers don’t have 
W3C-style geolocation, either. They’re based on Google Gears. 


Jim: This sounds complicated. 

Frank: It is. And we’re on a tight deadline. I don’t think we have time to chase 
down all of the odds and ends and do exhaustive testing on a whole bunch of 
obscure devices. What I did find is this open source, drop-in JavaScript library that 
handles geolocation across a bunch of different platforms, W3C-compliant or no. 
It’s called, simply enough, geo-location-javascript. 

Jim: But doesn’t that mean we’d have to go refactor all of our existing JavaScript? 



Frank: Nope. The API for this library emulates that of the W3C spec. All of the 
major method and attribute names are the same. I think we only need to change 
a few lines and then we can stop worrying quite so much about cross-platform 
compatibility. 


Jim: Oh, while we’re making edits to the JavaScript.. .the pop-up error for 
geolocation failures is ugly. And could use some finesse in wording. 


Frank: Yep. I think we should use a jQuery Mobile dialog, like the ones I built for 
form errors on the tartan-creation form. 


Jim: Oh, you didn’t tell me about that! 

Frank: If you try to submit the tartan form without a title, or if you forget a color 
or size when you add a color-size combo, a dialog will pop up to alert you to the 
errors of your ways. It’s styled in a nice, jQM way. 

Jim: How do you make a j Query Mobile dialog? 

Frank: They’re standalone jQM pages. Check out the ones in the dialogs directory. 
Then I make them show up from the JavaScript. 

Jim: Oh, cool. I can probably figure this out. 

Frank: OK. You do that. I’m going to drop in this geolocation library real quick. 



Copy the extras/js/geo.js file 
into the chapter7/js folder. This 
is the geo-location-javascript 
library. You can also visit 
the project’s home page, if 
you’re curious about it, at 
http://bit.ly/sx7JrH. 
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Update the Find Events page and the geolocation JavaScript to use the cross-platform 
geolocation code and show geolocation errors in a pop-up dialog. 


o Update findevent.php to include the JavaScript for the 
new geolocation library. 



<script src="http : //code.google.com/apis/gears/gears_init.js" type="text/ 
javascript" charset= n utf-8 n X/script> 

<script src=" j s/geo. j s " type= n text/javascript" charset="utf-8 n X/script> 

<script type="text/javascript n src="js/geolocation.j s"></script> 



❺ Update geolocation.js to use the new library. 

Find and change the following code from: 


■jrf ~(navigator . geolocation) 

— initGeoOptions (); 


to: 


if (geo_j>osition_js . init ()) { 

initGeoOptions(); 




and change this: 


navigator. geolocation. getCurrentPosition(onGeoSuccess A ~onGeoError); 


to: 


geo 一 position_js•getCurrentPosition(onGeoSuccess, onGeoError); 


❺ Create and invoke a dialog for geolocation errors. 

Using the other pages in the dialogs directory as a guide, create a nicely worded error 
dialog for geolocation failures. Name this file geolocation_error.html. 

Next, replace the alert in the onGeoError function with a dialog pop up. You 
can find examples of dialog pop ups in the js/tartanator.js file. You should only need to 
adjust the URL argument. 
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use my location 



xeRciSe 

SotutlOH 


Here’s what your onGeoError function should look like after you convert the 
error from a basic JavaScript alert to a jQuery Mobile dialog. We trust you also 
made the HTML page for the dialog itself! 

function onGeoError(error) { 


$ (’ #usegeo' ) •val(’ off▼) •trigger('change'); 

$.mobile.changePage( n dialogs/geolocation_error.html n , { 
transition : "pop", 
reverse : false A 
role : 'dialog' 

})； 


o 


We just blew through some gnarly JavaScript. 

We admit, that was pretty intense. And there’s some code 
we didn’t explain in depth. But this isn’t Head First JavaScript, 
and we didn’t want to distract you from the main tasks at 
hand: winning the battle with app Cache and taking advantage of Phone Gap’s 
mediaGapture API (even for browsers that don’t support it yet). 




Tsst DriVq 


Enough, already! Let’s see this thing in action. It won’t take much to hook this thing up 
to some search code and sample data. 


o Copy some needed files from the extras/events directory. 

Copy event—search.inc and event_list.inc into the chapter7 / inc directory. Copy events.php 
into the chapter7 directory. 

^ Try it out! 

Head to the Find Events page in your mobile browser of choice and hit the 
Use My Location switch. 
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mobile apps in the real world 


Nothing found 

Ha, ha. Sorry about that. Unless you’re lucky enough to be in 
the Portland, Oregon, metro area, you probably got this result 
on your first location-based search: 


Unless vouVc y^cav P 』 a 紕 
you ll vcsul*t ov. 70UV 

七 *bvY* 


That’s because all of the sample data is local, and the search 
radius is set to 25 miles. How’s about you add some of your 
own fake events to get this thing to deliver some results? 




Add a few events in the sample data that are in your neck of the woods. Find the eventjist.inc file 
in chapter7/inc/. Inside is a big PHP array representing fake data for events. Add a few of your own 
elements to this array, using an address and lat/long pairs that are within 25 miles of you. 

If you feel particularly uncomfortable with PHP, you could try just updating the address and 
lat/long of a few existing entries. The latitude, longitude, and state are what is used by the 
search script to find matches. 

Use this iool ^ a \ai/\o^ 
pailr \rcal ^ui^k -Po\r address ： 
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events geolocated just for you 



Tartans at the 


Matching E yents 


This is looking great, guys! This is what 
I had in mind when I first envisioned a 
mobile web app for the Tartanator. 


Nice! We’ve successfully integrated 
several of the features that make 
a mobile web app feel super: 
progressive enhancement, offline 
mode，and location awareness. 


Extra-super extra credit: Can you think of how 
you would go about adding a range input to allow 
users to determine the search radius? When 
should it show up? If you can figure out how to 
add an input with a name of radius, the backend 
search script is already configured to use it! 
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mobile apps in the real world 


Lookih^ good ih 
mobile b\roy/scv*s 


(^^BUUET POINTS 


♦> Back 


0,»lll04：23PM 


Events 



Matching Events 


various 


Salem Highlan. 

OR 221 

Salem, OR 97304 


Tartans at the 

4001 SW Canyon Rd 

Portland. OR 97221 


"This OhC s dh A^dvoid- 


Gresham Tarta... 

385 n.W. Miller Avenue 
Gresham. OR 97030 


Scottish Ramble 

777 NE ML King Blvd. 

Portland, OR 97232 


Web apps that feel natural and comfortable on mobile 
devices often share certain characteristics like well- 
considered progressive enhancement, a good 
offline mode, and location-aware features. 

Starting with a baseline is a great way to reach as 
many users as possible, and thoughtful progressive 
enhancement for more powerful mobile browsers can 
make things really shine. 

Crafting a relevant offline experience is important: 
mobile devices can’t be expected to have an 
always-available data connection. 

We can take advantage of the appCache feature in 
browsers by creating a cache manifest file to instruct 
the browser which resources to cache and make 
available offline. 

The construction of cache manifests is straightforward 
on the surface, but there are a number of gotchas that 
you have to carefully consider. 


In our cache manifest file, we can indicate which 
resources should be downloaded and cached for offline 
use (in the cache section) as well as those that 
should be requested afresh when an Internet connection 
is available (in the network section). 

Geolocation in the browser is supported widely 
among modern smartphones. Many implement 
the W3C’s Geolocation API, which exposes the 
navigator . geolocation object to JavaScript. 

Similarly to how we enhanced the tartan-creation form 
for supporting browsers, we also enhanced the Find 
Events form to integrate geolocation, when it’s available. 

Certain mobile browsers, especially on slightly older 
smartphones, have implementations of geolocation 
that are not W3C-compliant. To manage these 
idiosyncracies, we used a third-party geolocation library 
called geo-location-javascript. 

The geo-location-javascript library emulates the 
W3C API, requiring minimal changes to our original, 
W3C-specific JavaScript code. 
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8 build hybrid mobile apps Witfc rfeneGap 



4 Ack. Barbed wire. 

Boy, the grouchy old neighbors 
really kicked it up a gear this year 
to stop me from getting the apples 
in his yard. What I wouldn’t do for 
a bridge right now... 


Sometimes you’ve got to go native. It might be because you need 
access to something not available in mobile browsers (yet). Or maybe your client simply 
must have an app in the App Store. We look forward to that shiny future when we have 
access to everything we want in the browser, and mobile web apps share that sparkly 
allure native apps enjoy. Until then, we have the option of hybrid development — we 
continue writing our code using web standards, and use a library to bridge the gaps 
between our code and the device’s native capabilities. Cross-platform native apps 
built from web technologies? Not such a bad compromise, eh? 


this is a new chapter 


tartan tripping 


Opportunity knocks again 



f Scottish airline Loch Air has just 

agreed to sponsor an all-expenses-paid 
trip for two to Edinburgh. 

As part of the upcoming Scottish Celebration 
Expo in two months, Loch Air wants to run a 
promotional contest along with Tartans Unlimited, 
一一. 
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I was thinking we could have a sort of 
scavenger hunt. Contestants have to take 
photos of tartan swatches they find at the 
booths of conference sponsors. 


The Tartan Hunt contest will send attendees 
to seek out tartans hidden at the booths of 
certain key sponsors. 

Players are challenged to find and take a photo of each listed 
tartan with their devices’ cameras; found tartans are then 
checked off the list of hidden tartans. Once a contestant has 
found all of the tartans, he or she can show the completed list 
and be entered to win the trip. 


Sounds like a 
perfect addition 
to the Tartanator! 



Unfortunately, there’s a problem. 

Access to the camera — and some other 
device features like audio recording, 
filesystem operations, network status, and 
contact data — isn’t available for the most 
part in mobile browsers. 
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hybrid applications 



Um. Photos. We don’t have access to 
the devices camera from mobile browsers. 
What are we going to do? Do we have to 

go native? 


Frank: We obviously don’t have the time or budget to rewrite 
the Tartanator as a native app for a bunch of platforms and 
also add the new features Ewan wants. 

Jim: Does that mean we have to walk away from this work? 
That would be too bad. 

Joe: I wonder if there’s a compromise here somewhere. We 
might consider proposing a hybrid application. 

Jim: What is that? 

Joe: A hybrid application is a native application written with web 
technologies. Because it’s native, we can get at device capabilities 
like the camera, but the code itself is written with standard web 


stuff, so we can share the code across several platforms. 


Many device 
capabilities, like 
tke camera, are 


not accessible from 
motile browsers. 


TVis is sloy/ly (or 

bcUcr, Wb art still d 

a*t 

-fv-om *tV)C bv-ov/scv-. 


Frank: But if it’s web-based, and those features aren’t 
available in the browser, how does that work? 

Joe: There are several frameworks and platforms that provide 
bridges between web apps and native code. They take our web 
app, chew on it a bit, and then spit out packaged apps — native 
ones — for various platforms. They take care of the various bits 
and bobs for us so we can just use the web standards we know. 

Jim: Should we convert the Tartanator to one of these hybrid 
apps, then? 

Joe: I don’t think we have the time to wrap the entire app 
natively and test it effectively. Given the timeline, what do you 
think about suggesting that we create a native app just for the 
contest? 

Frank: I kind of like that idea. And we don’t have to risk 
making hurried changes to the Tartanator web app. It has a bit 
of cachet — attendees show up and can download a special app 
just for the event and the contest. Joe, if you think we can get 
the hybrid app thing to work on several platforms, let’s float the 
idea with Ewan. 
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build hybrid mobile apps with PhoneGap 


How do hybrid apps work? 


You write your code using standard web technologies like HTML5, 
CSS, and JavaScript — the same way websites have always been built. 
A framework or platform then acts as a bridge, providing a common 
API for you to use to access features natively on the various device 
platforms. It bridges the gap between your JavaScript and the device’s 
native code (for each platform it supports) and produces apps for 
various platforms. 


S-ta^davd 七杜 Vmolc^ies 

a 灼 d \rcsou\rtcs 


TV -fvawowovk 

i\\t c\av> IdcWcvx v/ck 

todt a^d 
^a*twc tapaWrbes... 

...like donr»pass, 
dohtadts, audio \rcdo\rd'mOi, 

r.i 丄 J 

-rilcsystcm... 















build some bridges 


fridge the web - native gap with Phone&ap 


PhoneGap is an open source HTML5 platform that allows you to create native 
apps for several mobile operating systems using the hybrid approach that we’ve 
been talking about. You write your code like you’re used to, using HTML, CSS, 
and JavaScript. PhoneGap provides the bridge between that and native code via 
a consistent, cross-platform JavaScript API. 

PhoneGap was developed by Vancouver-based firm Nitobi, which was acquired 
by Adobe in October 2011. But don’t worry: Adobe has already taken steps to 
make sure PhoneGap remains open source by giving the rights to PhoneGap 
to the nonprofit Apache Software Foundation. The newly minted Apache 
Cordova project will make sure that the PhoneGap codebase stays open source 
going forward. 



PhoneGap M\d 

PhoneGap Build is a web-based service that lets you compile in the cloud for ^ 
several platforms at once. It takes a bit of the drudgery out of the build process 
by allowing you to skip installing at least some of the SDKs, plug-ins, IDEs, and 
whatnot for each platform you want to support. 

Whereas with standard PhoneGap development, you’d do your own compiling 
and building, with PhoneGap Build you upload a zip file (or pull from a code 
repository) and it does the rest. 


suppov-ts 
up "to seveh 
tut ih -this dhaptev- 
^ Jo'mg -to use 

Build, whiA 


supports Apple i0S, 
Mdroid, BladkBcv-v-y ; 



Ewan has agreed to the Tartan Hunt 
contest companion app idea. Thafs cool, 
but we have an incredibly tight timeline. 
Where do we start? 


We’re going to show you how to 
build a hybrid Android app using 
PhoneGap Build. 

If you don’t have an Android device, not 
to worry. We’ll show you how to build and 
install the app for a real-life device and for 
emulated virtual devices. 
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O 


How come were singling out 
Android for this project? What 
about iOS and other platforms? 


We chose Android as our example platform for 
a few reasons. 

For one thing, it is a popular platform (duh). But, also, building 
and deploying iOS apps onto devices requires membership 
in the iOS Developer program (S99/year). We didn’t want to 
assume you’d fork that over. 


Android also has a freely available SDK that supports 
emulating many virtual devices across different versions of 
the Android OS. And the Android SDK runs on several 
platforms. With Xcode, the development toolset needed for 
iOS development, you’re out of luck if you don’t have a Mac. 



Is your development environment 
ready to go? 

If you haven’t done it yet, hold everything and visit 
Appendix iv. You need to have the right stuff installed 
and an understanding of how to install and uninstall 
apps on virtual and real devices before moving on to 
the next parts of the chapter. 


JavaScript ahead. 

You don’t have to be a JavaScript genius 
to make it through this chapter, but there’s 
no getting around the fact that today’s 


web app development involves JavaScript. 


To communicate with native functionality such as the 
camera APIs using PhoneGap, we need to use a 
client-side technology — and JavaScript is obviously 
the right guy for this job. 
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hybridization questions 


there J are no o 

Dumb Questions 


What other tools, products, or services are there for 
building hybrid apps? 

^/\^Two of the best-known hybrid development alternatives are 
Appcelerator Titanium and the forthcoming Sencha Touch 2 product. 

What platforms are supported by PhoneGap? 

PhoneGap presently supports Android, Bada, BlackBerry, 
iOS, Symbian, WebOS, and Windows Phone 7. See 
http://phonegap.com/about/features for a list of which of its features 
are supported on which versions of which platforms. 

Does PhoneGap Build support the same platforms as 
PhoneGap? 

Not quite. At the time of this writing, it does not support 
Windows Phone 7 or Bada. 

Is PhoneGap free? 

Yes. PhoneGap—or, as it is known going forward, Apache 
Cordova—is open source and free. 

What about PhoneGap Build? Is it free, too? 

It depends. PhoneGap Build offers tiered levels of service. Its 
free variant allows developers to have one private app and as many 
public apps as they’d like. We'll be using this free service to build the 
Tartan Hunt app. PhoneGap Build’s other levels of service increase 
the number of private apps and project collaborators. 


Why did I have to install the Android SDK? 

We won’t be compiling or building the Tartan Hunt App— 
PhoneGap Build will do that for us—but we still need to be able to 
install it and test it on an emulator, a device (if you have an Android 
device), or both. To do that, we need some of the tools provided by 
the SDK. 

We don’t, however, need to install the Eclipse IDE, which we’d likely 
need to do if we were developing and building the code ourselves. So 
at least we saved that step! 

Why is it that some things aren’t accessible in the web 
browser in the first place? 

There are several reasons that you can’t do anything and 
everything from the browser on mobile devices. 

Security is a considerable concern. Giving the browser access to 
things like the filesystem or the user’s contact list is something that 
has to be done carefully, with a lot of consideration about how to 
keep things properly sandboxed. Doing these things right takes time. 

In addition, some of the proposed standards for these features are 
new or incomplete, or have multiple variants vying for adoption. As 
these things get ironed out, expect to see some bumps along the way 
with conflicting or inconsistent support in browsers. 

But here’s to a standardized, device-API-rich future! Let’s try to enjoy 
the ride! 





If you have a device that is not Android but is one of PhoneGap Build’s supported 
platforms, or if you have an Apple Developer Account, we encourage you to try 
building and testing the examples in this chapter on your platform. 

Our test kitchen has run the Tartan Hunt app successfully on various flavors of 
Android and iOS. 
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fret acquainted with Phone&ap Puild 


build hybrid mobile apps with PhoneGap 



PhoneGap:Build 

Write once. Compile in the cloud. Run anywhere. 


Sign in 


Create an account 


Take the pain out of compiling mobile 
apps for multiple platforms 





_ 


js 

J 

htn^| 

__V 



palm gg I 





Get on over to 

https://build.phonegap.com and 
create an account. It’s free and only 
takes a moment. 



Roger. PhoneGap Build 
account set up, Android SDK 
ready. But you know, it’d be great 
to know what exactly it is were 
building. 
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app tapping 


How will the app work? 

The landing page of our app will display contest instructions and 
a list of tartans to find. Tapping on an item in the list goes to a 
display with more information about the vendor at whose booth 
the tartan can be found. 









How to Play 


_ 


Hall 4 


Welcome to The Scotti? 
and the Tartan Hunt gi © How to Play 
playing Tartan Hunt, y< 
an 5-day, all-expenses 
two to Edinburgh coui C340 

Air. Cailean Networks 

Category: Data and 

Object of the game: 

sponsors' booths bel( - 

the tartan swatch she 3BE| C12 ° Hal13 

prompted to take a c ! n ： onoir Panning, me 

the swatch. Once yoi 
tartans, go to booth _ 

be entered in the dr. C220 Haii 2 

Keir Software Technologies 
Category: Software Devel... 


Category: Urban Planning 


_ Categorv I 


C460 


Hall 4 


Scotland United Financing O 
Category: Financial Servic... 


Cl 70 

Tartan Attack! 


Hall 4 


o 


^ 3 dolUpsiblc 

So "that -the ihsivu^tiohs be 

hidden. You do this ih j^ucv*y 

/VIobilc by usmg a data-volc 
altiribu-tc Collapsible." 


See mde 个 

W k 伽 s 


and vc^dov- 
detail sdv-cch 




cailean Networks Design 
Hall 4, Booth C340 


m 


Ensuring that your online 
application and data Is 
available to your customers 
and employees is key to the 
success of any business. 
Managing potential network 
or server overloads as well as 
having a fail over plan are 
essential In providing a 
responsive, satisfying and an 
always available on, ' n ® n 
customer experience. Call us 
today for a free network 
health evaluation. 


found it! 


I 
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build hybrid mobile apps with PhoneGap 


Keep track of discovered tartaws 


I found it! 




10:57 




Ensuring that your online 
application and data is 
available to your customers 
and employees is key to the 
success of any business. 
Managing potential network 
° r s : ervei * overloads as well as 
having a fail over plan are 
essential In providing a 
responsive, satisfying and an 
always available online 

experience. Call us 
today for a free network 
health evaluation. 


aiiaDie online 
experience. Call us 
a free network I 
luation. 

Man 


•cum. 


We already have the basic HTML layout, CSS, 
and images. Now we need to make them do 
something and build a native Android app 
using PhoneGap Build. 


How well get from here to there 


In our completed app, clicking the “I found it!” 
button will launch the device’s camera, and the 
player can take a snapshot of the discovered 
tartan. The photo is displayed on the detail 
page and marked off as “found” in the list on 
the landing page. 




雩 D nil fi 


Tartan Hunt! 


o How to Play 


C340 



Mall 4 

Cailean Networks Design © 
: Data and Netw... 


Cl 20 


Hail 3 


Eilionoir Planning, Inc O 
Category: Urban Planning 



C220 


Hall 2 


Keir Software Technologies 
Category: Software Devel... 


C460 Hal14 

Scotland United Financing O 
Category: Financial Servic... 


C170 

Tartan Attack! 


Hall 4 


❶ 






ol 


Set up and configure a PhoneGap Build project. Zip 
up the current HTML, CSS, and images; build the 
app; and install it on an Android device or emulator. 


Add the ability for players to mark which tartans 
they’ve spotted. 


Add the ability for players to save photos of the 
tartans they’ve spotted. 
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app anatomy 


Awatomy of the Tartaw Huwt project 


Here’s the simplified structure of the content <div> in index.html. 

丁 s-b'rwt't'AV-C <div data-role= M content"> 

ouV" toyrbwb is a <div data-role= M col laps ible"> 

<ul> v/Vth d ok <ul id= "vendors M > 

y\CS*bcd 「 <li> 

<ul class="details">' 

<li>...</li> 

<li>...</li> 


匕 ㈣ 球 ) 


•</div> 


ul#vchdo\rs has ohe 
eivbry (<|i>) pev- 
"tav-tah -to -fihd- 




</ul> 

</li> 

_<li> 

<ul class="details"> 
<li>...</li> 

<li>...</li> 

• • • 

</ul> 

</li> 


</ul> 
</div> 



i-V^c vendor ^ thc 

Wd , 


index.html 



chapter8 


Stu-P-P well 
t\ttd lat 





extras 



images 


We’re using jQuery Mobile again for this project, so the 
overall look will be generally consistent with the Tartanator. 

dlmOS-t 

WcYe already organized for Phone 昏 ap Wild 


The structure of our starting point is now almost ready to 
drop into Phone Gap Build. 


PhoneGap Build projects have a structure based on the 
W3C web widget specification. Web widgets are 
encapsulated web apps that are meant as standalone client 
applications. In their most basic form, they consist of at 
least one start file (in our case, index.html) and a configuration 
file (in XML). You can add any number of files that your 
app will need to the package — things like images and CSS 
and JavaScript and whatnot. 


1/Vavma v-cad -the spet? 
tteve "l*t is ： 

y/^.ov-^/TR/ v/idyts/. 


—議 

index.html 



style 


We’re already almost there. But we need to create a 
configuration file to give PhoneGap Build some needed 
details about our app. 


PhoneGap Build will look for a file 
in our project called config.xml. 
Let’s go build that now! 
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Let’s make our first PhoneGap Build app. First, we need a configuration file. 
Create a file called config.xml in the chapter8 directory. Use the template 
below to complete the file’s contents. 


^ivc -the app a U 你釙 -readable 
3hd desdv-iptioh. 



<?xml version= n 1.0 
〈widget xmlns 

xmlns : gap 
id 

version 


encoding="UTF-8 n ?> 

"http :// www.w3.org/ns/widgets" 

"http :// phonegap.com/ns/1.0" 

LcVs use dom.V>-fmy/.*t3V*t3ir>huir>*t 3s ouV* s |P- 


1.0 • o n > 


<name></name> 

<description></description 〉 
<author href= M n 

email= nn >YOUR NAME HERE 



^ ahd email add^ss. 

卜釙 u” hUp://“- 崎 .“ 

4 y° u have youv- owh si-tc. 


</author> 

<icon src= n images/touch-icon-iphone4.png" height= n 114 n width= n 114 n / > 
</widget> 


LcVs add I ⑽ s! TKcsc sKo>m u\> i\\t 
usev，s screen, l/^ve added Ws 七 

ov\t lor you. Pmd i\\t rtsi m i\\t imays 

add 3s well. 



config.xml 


Remember that a PhoneGap Build project is either built from a zip file or 
pulled from a code repository. We’re going to take the zip file route. 

Zip up the entire contents of the chapter8 directory. It doesn’t matter what 
the resulting file is called, as long as it is a zip archive with a .zip extension. 
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exercise solution 



Your config.xml file should look something like this. But don’t lose your identity! We expect you to 
use your own name and stuff. 


<?xml version= n 1.0" encoding= n UTF-8"?> 


<widget xmlns = "http://www.w3.org/ns/widgets 

xmlns : gap = "http :// phonegap.com/ns/1.0 n 
id 

version 


"com.hfmw.tartanhunt" 
n l. 0 . O n > 


<name>Tartan Hunt</name> 

<description>A companion application for the Scottish Celebration : 
win a trip for 2 to Edinburgh from Loch Air! 〈 /description 〉 


〈author href="http : //www.hf-mw.com" 
emai1= "help@hf-mw.com"> 

Lyza Gardner and Jason Grigsby 

</author> 






<icon src =l 'images/touch-icon-iphone4 .png" height= n 114" width= n 114" / > 

<icon src="images / touch-icon-ipad.png" height="72" width="72" /> 
<icon src="images / touch-icon-iphone.png" height="57" width="57" /> 
<icon src="images/icon-48.png" height="48" width="48" /> 

<icon src="images/icon-36.png" height="36" width="36" /> 


</widget> 


-11」 

config.xml 
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build hybrid mobile apps with PhoneGap 



ExdKciSd 


Log in to PhoneGap Build to see your dashboard. 
It’s time to create our app! 




Cli^k -the hew app 
bu*t*toh -to jc-t sis^ried. 


PhoneGap^Butld Apps Docs Blog Help 


Your Apps 



PhoneGap: Getting Started 

Version 1,0.0, last built 11/09/2011 



New app 


Navigation 

Apps 

Docs 

Blog 

Help 

Edit account 


P 


Tartan Hunt 


enable debugging 
make app private 

select upload method 


Vouv sett 、 呼 

Should look -tv. 



create a new git repository 
pull from a git/svn repo url 
{*) upload an archive or index.htnnl file 

Choose File Nofite ctbssen 

A_ 



sign out 


m 


ADMIN 



:s reserved, 
sof Use and Online 



Choose the zip -file 
you Sealed -Pv-om the 
dnrcd"tovy. 



C\\cM Cv-ca*tc *to> 

Ortd^t youv- 
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grab an app 


Pownload your apps 

After you upload the zip file, Phone Gap Build will queue 
your app for building. Wait a minute or two and refresh the 
page. You should see Download buttons for each platform for 
which the app was successfully built. We want to download the 
Android package (APK) file. 


PhoneGap：Build Apps Docs Blog Help 


Tartan Hunt 


A companion application for the Scottish Celebration: win a trip for 2 to Edinburgh from Loch Air! 

oom.hfmw.tartanhunt at 1.0.0 last built at Nov 13,13:21 PST (1 total builds) 


sign out 


國 


ADMIN Q PRIVATE 




the build 

piro^ss is dohe, you'll 
see a Powhlodd 
Utioh appear 
like this. _ 

N/ 


響 GHD^OID 


rebuild 



app，^ady -to ihs-bll. 


OK, let’s get this 
thing installed. 
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build hybrid mobile apps with PhoneGap 


Choose your adventure 

I 

Install oh a" emulator OR 

To prep for installing the app on a virtual device, start 
the Android SDK. Go to Tools — Manage AVDs 
to bring up a list of your installed Android virtual 
devices (AVDs). Launch a device for a recent-ish 
version of Android. The emulated device needs to be 
running when you install the app. Don’t try to install 
the app until the emulator is all the way booted up. 


Install ov\ a real device 

If you have a real-life Android device, woot! Connect 
your Android device to your computer’s USB port. 
Yep. That’s it. 


Ready, aim, fire! 


The process for installing the app is the same whether you’re 
deploying it virtually or to a real device. Open up a terminal 
window (Mac or Linux) or type cmd in the Start menu’s Search 
box (Windows) to get a command line, and cd to the directory 
where you downloaded the Android APK file. 


The command to install the app is: 

iVe -talk about *bWis "m wove 

detail ⑺ /\?? ⑼出乂 W. 



Ouv AP^ ^ ^ as 於 awcd 

Tarba 瓜七 ._• 



Doir/t -Povgci/ Youv- fv-cal) device 
be a-ttadhed ov- your 
ci^ul 3 "to\r -Pully booked bc-po 1 
\ruh this dommahd. 


>\rc 


you 


You should 
see sowf»ctli'mg 
sirwila\r {x> this... 


I File Edit Window Help Tartans 


$ adb install TartanHunt.apk 
1157 KB/s (683431 bytes in 0.576s) 

pkg: /data/local/tmp/TartanHunt.apk 
Success 




usmj 3 k\ 

/\\/P -for A^dv-o'id 2-3 or 
千 .0+. Eav-l'icv- vcv-sio^s V^avc 

csfc6ally *fo\r CBnstra 
s*tu*f*f do U 七 d 


You should now be able to see the 
Tartan Hunt app in the application 
screen of your device or emulator. 
Go ahead and launch the app! 


TV you vul afjp, 

take a liUlc v/W.lc-u^ to 
about ^>0 sctoy\ds—*to 
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tartan hunting in the wild 




C220 

Keir Software 
Caiegory. Soft 


C340 


ms-tv-u^-tio^s dolla^scd 
emulated A^dv-o'id device. 


"^ 七 h Wuht \tOY\ is 

sh 7 ih 9 U P ^ ^is Ahd^oid 

^Ppl'^tioh s 〜 《 h.) 


s 


Ensuring that your online 
application and data is 
available to your customers 
and employees Is key to the 
success of any business. 
Managing potential network 
or server overloads as well as 
having a fail over plan are 
essential in providing a 
responsive, satisfying and an 
always available online 
customer experience. Call us 
today for a free network 
health evaluation. 


C120 Hall 3 

’ionoir Planning, | nc © 
Category: Urban Planning 


12:44 


The Idndmg sdv*ccr> 
of ihc app m a 
vc\rsior\ Z33 emulaied 
A^dv-oid device. 


O^t of nested 
subways or\ A^dv-o'id 
|v(cy.us Or\t device. ^ 


Hall 4, Booth C340 


O How to play 


I found it! 


C22 ° Hall 2 


C460 Ha »4 

Scotland United Financing © 
Category： Financial Servi 


TV^c Ud_ \0^ 

dcvkc — 4 a 
s 吵叫 key ••七 ^ ks : 


Cailean Networks Design 


C340 Hall 4 

failean Networks Design © 
Category ： Data and Netwo... 


iPod 
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build hybrid mobile apps with PhoneGap 



Interesting. We only have one HTML 
file. But each tartan I touch seems 
to take me to a separate page. 


jQuery Mobile automatically converts nested <ul>s 
into separate “pages ■” 

It does this by converting each nested list to a <div> with a data-role 
of page and using that <div> as the active “page” when the list items 
are clicked. There is still actually only one proper page, technically. You’ll 
also note that it uses the title of the parent list element (in our case, the 
vendor’s booth number) as the title of the nested list’s page. 


Hey, what about PlackPerry? 

If you visit your dashboard on PhoneGap Build, you might see 
something like this: 



Tartan Hunt 



Version 1.0.0, last builtt 11 /13/2011 


BlatkBcv-v-y status is g PRIVATE admin 

PR 娜 Y.:( 


iOS 




web OS 






\tk ^ould 

i\\t iOS situation by 

fvovidimj 3 

Ley (vf we ewe). 


What’s with the frowny face for BlackBerry? Well, sadly, there’s a problem 
currently with the combination of PhoneGap Build, BlackBerry, and any 
filename with a hyphen in it. Several of the jQuery Mobile files we need 
have hyphens in their filenames. 


Fov- purposes o( 
levity ahd sahi-ty— 
because Ewdh has 
expressed di-ffidchtc 
about the 

BladkBc\r\ry platfov 、 
v-c hot go'mg {jo 
addvess this hcv-c... 


To make the PhoneGap Build Tartan Hunt app work on 
BlackBerry OS, you would need to alter jQuery Mobile’s 
icon filenames and update any reference to them in jQM’s 
source code. While this wouldn’t take too long, it does 
mean “hacking” jQuery Mobile’s core and introduces a 
maintenance burden. What do you think? Is it worth it? 
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uninstall to reinstall 



Let’s add a splash screen so that users don’t have to look at a boring blank 
screen while the app loads. Use the PhoneGap Build con/ig.xm/documentation at 
https://build.phonegap.com/docs/config-xml \o figure out how to do this. Find the two splash- 
screen images in chapter8/extras/images and move them to the chapter8/images folder. 

Update con fig. xml, zip up chapter8 again, rebuild the app on PhoneGap Build, and 
reinstall it to see the new splash screen take effect. 


Look -Pov- the ^Update 

乙 od^ bu-fc-fcoh -to upload^ 
you\r updated zjp +i| c . 

丁 he \rcbuild 

stairb au-toma-ti^ally 
Upload. 



Tartan Hunt 


A companion application for the Scottish Celebration: win a trip for 2 to Edinburgh from Loch Air! 

oom.hfmw.tartanhunt at 1.0.0 last built at Nov 15,16:39 PST (51 total builds) 




ADMIN |9j PRIVATE 


Update code 



* i^TSwers onpa^e 334. 



You need to uninstall the app before you can reinstall it after 
making changes. 

Each time you rebuild the app on PhoneGap Build and need to reinstall it 
on a device or emulator, you need to uninstall first. Run this command when 
the device is attached via USB, or when the emulator you want to uninstall it 
from is running. 


File Edit Window Help TartanHuntin 



Kotc ^ a ?P s 

pa 已 kay IP u\r\"ms*t3ll 

6ow>md^di 

OV- you sc*t IP -to 

m ilc)> ^o*t 

/\p^ -filename like y/c d\d with 

ur\S*bdll 
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build hybrid mobile apps with PhoneGap 


Nice work, hotshot! 


Rock on. We have an app. Now let’s 
make it do what it’s supposed to do. 
We’ve broken down the functional 
pieces into two steps. 

First, we want the app to be able to remember 
which tartans the user has found. When players 
click the “I found it!” button, we need the app to 
keep a record of that. 


Store which tartans users have found 



Congratulations, 
you just built a 

native mobile 卿 . 


Not so tricky, huh? You can use your 
web dev chops to build native stuff 
without too much hassle! 



Set up and configure a PhoneGap Build project. Zip 
up the current HTML, CSS, and images; build the 


app; and install it on an Android device or emulator. Ids build *bV)C 

abilit/ *to keef tv-adk <^f 

Add the ability for players to mark which 七 ' s cv " s 5 

tartans thev 5 ve spotted. ^ oun 


Add the ability for players to save photos of the 
tartans they’ve spotted. 


丁 kh wc II Covtxc bddk ih a 

bit 3hd the app "fco 

prompt usc\rs -to take a pho-to. 



How am I going to get the app to 
''remember" which tartans the users 
claimed they saw? Are we going to have 
to get down and dirty with native code? 


Fortunately, there’s a way to 
do this in JavaScript using an 
HTML5 web standard called 
localStorage. 

It’s already supported in the default 
mobile browsers of all of the platforms 
we’re targeting with PhoneGap Build. 


|Vs Y\oi suffov-ted by 
BladkBcv-v-y bc-fov-c OS 
but y/cVc not siAffovtmj 
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run to the localStore for found teitans 


Who's seen what? Store found tartaws 


We can store simple data on the client — in our case, which tartans 
have been found — without much fuss using the localStorage API in 
the browser. 

What makes localStorage so special? 

In the past, developers have often relied on HTTP cookies for data 
that needs to be kept on the client. There are a few downsides to 
cookies, however. 

Every time the client makes a request to a server, the entire contents 
of all cookies for that domain are transferred. Sometimes, a developer 
might want to store hefty amounts of data on the client — say, images 
or considerable amounts of configuration information — which isn’t 
feasible with cookies (or, at least, isn’t performance-friendly!). 

Also, cookies are notoriously convoluted to work with using JavaScript. 
They’re just kinda clunky. Plus, there is some data we might want to 
stick on the client that the server just doesn’t need to know about (or 
maybe, as in our case, there is no server). 

localStorage was designed specifically for the straightforward storage 
and retrieval of string data in key-value pairs on the client. It gives us 
methods to set, get, and clear out data — and that’s about it. It’s not 
complicated. 



Here’s the end of the config.xml file, with splash screens 
added. The two sizes allow us to have a bigger version 
for devices with higher resolution. 


Our a\>\> V^as a sflasK 

TWis is y/V^at \i looks l'»kc 


iPod Toia^V). 


飞 



<icon src= M images/icon-48.png" height="48 n width= n 48" / > 

<icon src= M images/icon-36.png" height= M 36 n width= n 36" / > 

<gap : splash src="images/splash2x.png" width="640" height:"960 n /> 

<gap : splash src="images/splash.png" width:"320” height= M 480" /> 

</widget> 

config.xml 
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build hybrid mobile apps with PhoneGap 


What caw localStoragc do for us? 

When a player clicks the “I found it!” button, we can add an entry to 
localStorage. And we check for data in localStorage when we want to 
see which of the tartans the contestant has already found. 


Meet the getter and the setter 

There are two methods on localStorage that provide most of its 
utility. First, we set a value: 



Both key 3iy\A the 
value mus*t be s*tv*m^s. 


A key ^ h> 


^ --^ ^ 广 



Then, later, we can ask for that value by using its key: 


TV^c key *fo\r y/WA we’d like 

^ shored data, flcasc! 



a value is (o\AY\d -fov- key, JK 

i*t is assi^cd -to s*tovcd\/aluc. data (o\- -the key is v\oi -fou^d, 

s-to\rcd\/aluc v/ill be m\\. 


In our case, when a user found, say, the Douglas tartan at a vendor’s 
booth and indicated this by tapping the “I found it!” button, we could do 
something like: 


localStorage.setltem(▼douglas', 'true'); 


Then if we wanted to check if he’d already found the Douglas tartan, we 
could ask localStorage: 


var isFound 


localStorage.getltem('douglas') 
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magnetic commentary 



localStorage JavaScript Magnets 

It’s time to update scripts/app.js (our app’s main JS code) to 
record found tartans. The updated app.js file is on the next page. 
Your job is to add the comment magnets above the lines of code 
they refer to. 

You can only use each magnet once, but you might end up with 
some left over! 




// Get the entry from localstorage 
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build hybrid mobile apps with PhoneGap 


(function () { 

$(document) .bind("mobileinit" A function () { 

$.extend($.mobile, { defaultPageTransition : 'none' }); 

$.mobile.page.prototype.options.addBackBtn 二 true; 

})； 

var initDevice = function () { 

if (typeof(window.localStorage) == 'object') { 

$( 1 .foundTartan').click(tartanFound); 

addResetButton (); 

} 

}； 

$(document).ready(initDevice); 
var tartanFound = function(event) { 

var tartanKey = $(event.currentTarget).attr('id'); 
localStorage.setltem(tartanKey, 'true'); 


var addResetButton = function () { 

var $resetButton = $('<a></a>')•attr('data-role ', ' button ') . html('start Over !')； 
$resetButton.click(function () { 


localStorage.clear (); 

})； 

$resetButton.appendTo($('#booths')); 

}； 

})()； 


1 

app.js 
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comment magnets solution 


(function () { 

$(document).bind("mobileinit", function() 


// Turn off jQM page transitions 


$.extend($.mobile , { defaultPageTransition : ' none ' }); 

I // Add a back button to the nested list subpages 


WleVc 七 he 

/ pay *brWrti 。灼 s because 

^ iiicy av-c slow oy\ some 

f[y\dro\A dcvidcs. 


.mobile.page.prototype.options.addBackBtn = true; 


})； 


var initDevice = function() 


// check for localStorage support in the browser 


if(typeof(window.localStorage) —— 'object') {_ 

// Add a click handler for the n I found it! 1 ' buttons ( 


(*.foundTartan 1 ).click(tartanFound); 


addResetButton(); 


// Call the initDevice function when the DOM is ready 


Wc OY\ ly add tlidk 

V>dy>dlev- -fov bvov/sevs 七 ha 七 

suffovt lodalS-tov-ay. 

Ditto wi-fcli -the 
1 Preset but-toh. 


$(document).ready(initDevice); 


// Click handler for n I found it" button 


var tartanFound = function(event) 


// Get the ID of the clicked button 


var tartanKey = $(event.currentTarqet) .attr ( 1 id'); 

1 // Store that this tartan was found | value is sov-*t o-f 

avbi-tv-avy. Wle jus 七 y/a 灼七 *to 


localStorage.setltem(tartanKey, 'true'); 


s-fcov-e 


some 


七 uf 


var addResetButton 


function() 


// Create a button-styled <a> element 


You cav\ see 七 ha 七 wcVc addmg a bu-t-fco^ -to 
lei i\\c usev \rcsci av\d s-tav-t 七 he ovcv. 


var $resetButton = $ ( '<a></a>') •attr('data-role ', ' button') .html('start Over !，） 


// Add a click handler for the reset button 


] 


$resetButton.click(function() {_ 

I// Clear all entries from localStorage | 


localStorage.clear (); 



}) 


// Insert the reset button into the page 


$resetButton.appendTo($('#booths')); 


})()； 


^ didAteN you 
about the t\tM) method , 

yd — did you -figure it out? 

I 七 does v/ha 七 ••七 sounds 
like: dleav~s all keys a^d 
•tKc'iv- assod'iaied values 
-fvom lodalS*fcov*a^c- 




app.js 



// 
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build hybrid mobile apps with PhoneGap 


Check out what a browser supports 

We talked a bit about client-side feature detection way back in Chapter 
2, and that’s what we’re doing again here inside of the in it Device function. 
By checking if window. localStorage is an object, we are detecting if the 
localStorage feature is supported by the browser. 


var 


initDevice = function () { 

if (typeof(window.localStorage) 


， obj C 


$('.foundTartan').click(tartanFound); 
addResetButton(); 



pcV"-foVm some Side 

-feaiuv-e heve *to 

make suve lodalS-bov-a^c is 
suffov-*tcd bc-fovc add'rn^ 
di 匕 k ka^dlev' av\d sKowmj *tKc 
vcsc*t bu*t*boy>. 



C 'mi*tPcvidc is CsWtA oy\ f(do6_eirt).ready0. 
TVaidaiion: rt jcis c^cduicd wh 伙七 he page's 
VOM is done bemg mi'tidlizjed by j^uev-y. 


Client-side feature detection can be quite simple, like this example, but there are 
also JavaScript libraries that provide detection for all sorts of features. Modernizr 
{http://modernizT.com) is a widely used example of such a tool. 

Put wait … the story isn't over yet 



Wt also did -Pcaiu\rc 
’m Chap 七饮弓 usmg WURfL 
device ^apabili-ty data. Tha-t's 
sc\rvc\r-sidc -PcaiuVC dtitthoy\. 


The leftover comment magnets give us a clue about what else we need to do 
here. We’re storing found tartans, and providing a way to clear them all out, but 
the interface doesn’t change. We need to write some code that updates the 
display so players can see which tartans they’ve found. Turn the page 
to get started. 


^ wd -to -bk 
y these iiems/ 


// Get the entry from localStorage | 


// Update the display to 
// show which tartans 

// have been found 
-- 


By only adding click handlers and the reset 
button if localStorage is supported, we are 
in effect setting a minimal bar for supported 
browsers, Chapter 4 style. Can you think of 
why this might be OK? Can you also think 
why it might not be in some cases? 
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the key to localStorage searches 


Use a fuwctiow to show which tartaws are found 


Sounds like we need another function in our JavaScript — one that 
can update the way the page looks depending on which tartans have 
been found. Let’s dive in again. We’re going to call our new function 
ref reshTartans because it updates the appearance of the tartan 
listings and the detail screens depending on which tartans have been found. 

Each of the nested lists — ul. details — in index.html contains 
information about a single vendor and tartan to be found. We can use 
the id attribute of each of those lists to determine a key to look for in 
localStorage. If there is a value of any sort for that key, that tartan has 
been found and we need to update the interface to reflect that. 


/MWk R 鄉 9 BaK 会 

^ -V 

Java§cR?pt 


So, -fov eadh ul dc*ta*iU 
dodumCirrt... 

❶ Figure out the haw of 
"Uie key look -Po\r ih 
lo^alS-tovagc by getting -the 
_d attv-ibutc or this <ul> 
pvcpchdih^ '-fouhd — ； 

c'-fouiad—doU^las ， 

❺ -fov key 

lodalS-fcova^c- 

❺ MIc ihe visibility dhd 
d,asscs sow elemchts -to 

wkcthc\r "theyVe 

bcCh ^OUhd OY 


Rc-fv-csh *thc j^uev-y Mobile 
IlS-tviCV/S m dodumCir>t 



This is j^uevy code. H means: iievaic (loop) ovcv eadh ele^i 七 ha 七 
•^a-Uhcs -the CSS sded-tov ul.dc-tails (<ul>s wi-th a dlass o( Metails"). 


In 


app.js 


__ 




l-f >wc do〆 七 , 
al*tcv-cd >wo 灼七 

be s*tylcd dovvcd*tly- 


$(document).ready(initDevice); 

refreshTartans = function() { 

$('ul.details').each(function() { 

var mylD = $(this).attr('id'); 

var tartanKey = 'found-' + mylD; 

var foundValue = localStorage.getItem(tartanKey); 
var isFound = Boolean (foundValue); 

$('#vendor-' + myID).toggleClass('found', isFound); 

$('[data-url*= M '+myID+' n ]').toggleClass('found',isFound) 
$('#'+tartanKey).closest('li').toggle(!isFound); 

}); 

$('ul').each(function() { 

if ($(this).data('listview')) { 

$(this).listview('refresh'); 

} 

})； 

tartanFound = function (event) { 


Whafs all that 
toggle stuff? 

Rcmcmbcir, j^uevy Mobile ^~ 
builds oh -top j^uev-y ； toggle and toggleClass 
so wc have all o( s are part of jQuery. Let’s 
methods avaibbU in ..c take a closer look. 


O 


0 
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The toggle and toggleClass methods 


toggle and toggleClass are jQuery methods, toggle 
toggles the visibility of an element; toggleClass toggles 
the application of CSS classes to an element. 


By selectively apply— 七 he '-Pou^d 

CSS dlass -to 匕 evtam usmj 

■togjIcClass, wc use s-tylmg -feo 
show whidh ta\rta^s avc *Poud … 


...av\A >wc cav\ iiidc ihe w l -Pour>d bu*t*to 
y/hcir> iVs y>o*t needed usm^ 

Let's look at that code chunk again 

Remember that localStorage . getltem (tartanKey) will either 
return the value stored for that key (in our case, the string ' true ') or 
null. We convert that to a Boolean value (true or false) so we can 
use it with jQuery’s toggle and toggleClass methods. 




Ensuring that your online application 
and data is available to your customers 
and employees Is key to the success of 
any business. Managing potential 
network or server overloads as well as 
having a fail over plan are essential in 
providing a responsive, satisfying and an 
always available online customer 
experience. Call us today for a free 
network health evaluation. 


(No button hcv-c/) 


^ a real Boolean value 
fhot just the stmihg 'tvuc' ov- 
^ul!) -to use these methods. 


isFouiad is *tvuc i-f 
av>y value exists *m > 
lodalS-tova^c -fov 七 iVis 
-tav-*tay>; -false o*tKcv->w*isc. 


var foundValue = localStorage•getltem(tartanKey); 

var isFound = Boolean (foundValue); 

$('#vendor-' + mylD).toggleClass('found', isFound); 

$ ( ▼ [data-url* = ▼▼’ +myID+ ▼’▼]’）• toggleClass ( ' found ▼ , isFound); 
$('# ! +tartanKey) .closest ( 'li') .toggle(!isFound); 


toggleClass will add the CSS class indicated (found) to the elements that 


match the selector given if the isFound value is true (and remove the class if 
it is false). 

Similarly, toggle will show the <li> element indicated if it’s passed a 
Boolean with a true value. We’re doing something a bit clever here and giving 
it the opposite of the current value of isFound (that’s what ! isFound does). 
Why, you might ask? Well, we want to hide that < 1 i > if the tartan’s been found 
(that is, isFound is true). That’s the <li> that contains the “I found it!” 


Summavy ： Add -Pou^d dass 
*to *tv/0 dir>d hide 

<|*I> wtami% 七 he “I I 七 "’ 

bu*t*to^ i-f *tclv-*tair> has 

•PoundL Remove 七 he dldSS 
siiov/ 七 lie bu*t*toy> i-f ir>o 七 . 


button. We don’t need it to show up anymore if the tartan has been found. 




Add the completed magnets code and the refreshTartans function 
to scripts/app.js. refreshTartans needs to be called on page 
initialization and any time localStorage is altered. See if you can figure 
out where in the code the three calls to refreshTartans need to go. 
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refreshed tartans 



Here are the three places refreshTartans needs to be called in app.js. 


SoLutlOH 


lVKchcvc\r a hew tav-bh is *fo U hd... 


var initDevice = function () { 

if (typeof(window.localStorage) == 'object ，） 
$ ( ' .foundTartan') .click(tartanFound); 

refreshTartans(); 

addResetButton(); 


var tartanFound = function(event) { 

var tartanKey = $(event.currentTarget).attr('id'); 
localStorage.setltem(tartanKey, 'true'); 

refreshTartans(); 


the tav-ta^s 
av-c \rcsct 



var addResetButton = function () { 

var $resetButton = $ ( '<a></a>') .attr('data-role ', 'button'). 
html('start Over!'); 

$resetButton.click(function() { 

localStorage.clear (); 
refreshTartans(); 

})； 

$resetButton.appendTo($('#booths')); 


圍」 


app.js 


Tesr DriVq - 

Edit app.js to integrate the changes from the last several pages. Save 
the file and preview Tartan Hunt’s index.html in a desktop web browser 
(this should work just fine). Try clicking on some tartans and their “I 
found it!” buttons. You should see found tartans and their detail pages 
receive some CSS style changes (things will turn green). 

If you’re having trouble, use the Web Inspector tool in Chrome or 
Safari, or the Error Console in Firefox, to review possible JavaScript 
errors. If you’re really stuck, you can find a finished version of the file in 
chapter8/extras/scripts/app.localStorage.js. 

Voull heed -to v-cpladc youv- 
3pp.\s y/ith -this -pile \\ you 
v/aht -fco use it. 



Go ahead and zip up the 
contents of the chapter8 
directory again and rebuild on 
PhoneGap Build. Install again 
on a device or emulator and 
try it out! 
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build hybrid mobile apps with PhoneGap 


therejctre no ^ 

Dumb Questions 


Which browsers currently support 
localStorage? 

The short answer is: most of them. But not 
Opera Mini. And if you’re still using Internet Explorer 
version 7, you’re out of luck there. 

Do the keys have to have certain names? 

Both keys and the values you assign to them 
have to be strings. Beyond that, the sky’s the limit. You 
can call them whatever pleases you. 

How much data can I store? 

The W3C localStorage Specification is sort 
of adorably vague about this. To quote: “A mostly 
arbitrary limit of five megabytes per origin is 
recommended. Implementation feedback is welcome 
and will be used to update this suggestion in the 
future.” 

Most browsers provide between 2 and 5 MB. Some 
browsers, like Safari, prompt users to allocate more 
space if the allotment is used up. 

Can other sites or apps access my 
localStorage data? 

No. Part of the spec is concerned with security 
and mandates certain things that prevent other origins 
(very rough translation: other sites) from accessing any 
localStorage data other than their own. 


You said that you can only store strings in 
localStorage. But earlier you mentioned that you 
can use localStorage to store images. How could 
that possibly work? 

Strings, yes. But what’s to stop us from storing 
rather large strings? Images can be stored as their 
BASE64-encoded strings and used directly as the value 
of <img> src attributes or as url () values in CSS 
background images. Browser support for data-URIs 
(that’s what this is called) is pretty decent, with the big 
exception of Internet Explorer. Read more about it in this 
article by Nicholas Zakas: http://bit.ly/sWe7HS. 

Wait a minute! I was just looking at the code 
again and noticed we're adding a back button on 
the nested list pages. That doesn’t make sense for 
Androids—most Android devices have hardware 
back buttons already. 

Well spotted. The back button doesn't just feel 
awkward for Android, it actually closes the PhoneGap 
Build-generated app! That is not good. We’ll come 
back to this in just a bit and fix it. 

If localStorage is available in the browser to 
us, why are we using PhoneGap Build at all? Can’t 
we just make this a web app? 

^\^lAha! Patience! We're just about there. It's time to 
integrate the camera into Tartan Hunt. 
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